[CSS] コンテンツ内の最後の要素にかかっている不要な余白をキャンセルするCSSの叡智が凄い

コレは思いつかなかった。

コンテンツエリアの最後のパラグラフにmarginが残っていることが、何かと不満でした。

どういうことかというと、ブログ文章を読みやすくするために＜p＞あたりにmarginがかかっていると思います。すると当然最後＜p＞にもmarginがかかります。

これ。このmarginは、正直いりません。僕は親要素の＜div＞でコンテンツ部分のmarginを制御したいと考えるからです。

いやいいやんと思うかもしれませんが、そこはグラフィック畑の私、気になります。私気になります！

もちろんクラスを付けたり力業で消すことはそこまで難しくないんですが、コードがスマートすぎるのでご紹介。

詳しくは上記を参照して頂きたいのですが

.module > *:last-child,
.module > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child {
  margin: 0;
}

例えば自分のブログに置き換えるなら、あなたが読んでいるこのメインコンテント部分は「post-content」とクラスを打っているので。

.post-content > *:last-child,
.post-content > *:last-child > *:last-child,
.post-content > *:last-child > *:last-child > *:last-child {
  margin: 0;
}

例えばコンテンツ部分の最後にリストがきても、divで入れ子にしても、中の中にまで突っ込んでmarginをキャンセルしてくれます。

疑似要素と、Universal selector（*）の組み合わせですが、実にスマート。

セレクタ – CSS2リファレンス

数式が美しい！とかコードが美しい！とか正直意味がわかりませんでしたが、コレばっかりは素直にひれ伏しました。

感動を禁じ得ません。

参考：パラグラフやリストなどのテキストの下にできてしまう意図しない余白を解決する方法 | コリス

文：シンタロヲフレッシュ

はてブ

pocket

twitter