第28回　CSSセレクター、first-child

CSSセレクターの「first-child」はとても便利なセレクターです。

リスト表示等の時に役に立ちます。

HTMLで

上記のようにコードを書いたとします。

で、例えば、一番上の色だけ赤にしたい、また、一番上のリスト以外はボーダーボトムでラインを書いて、

一番上のみボーダートップでラインを書けば、すべての枠で囲むことができます。CSSは、

こういう具合です。結果は、

こんな感じになります。ボーダーをトップとアンダー両方書くと線が上下で重なってしまいますが、

first-childを使えばそれを防げるのです。

このセレクターを知ったときは衝撃でした。みなさんもぜひ。