コレ理解できてなかったCSS・・・first-child

WEBアプリの作成をよく行っているんですが思ったレイアウトにならないことも多々あります。
基本的にはタイプミスなのですが、今回始めて気付いたCSSの動きについて備忘として・・・

 

【 :first-child 】

セレクタとして使い慣れると便利なfirst-childですが完全に私勘違いしてました。
例えばCSSに下記を指定したとします。

div p:first-child {
color: #FF0000;
}

 

HTML部は

<div>
<p>ここは赤色</p>
<p>ここは普通</p>
</div>

 

これなら普通に1つ目のpタグに対してCSSが反映され赤色になります。

ここは赤色
ここは普通

 

ただしこんなHTMLだと・・・

<div>
<h1>タイトル</h1>
<p>ここは赤色</p>
<p>ここは普通</p>
</div>

 

なんと・・・反映されない!!最初のpタグじゃないの!?

タイトル
ここは赤色
ここは普通

 

これが勘違い・・・実は:first-childは最初の子要素であり最初のPタグじゃないんです。。
よって後者のHTMLではdivの最初の子要素はh1なのでCSSが適用されなかったんですね。

ではこの時はどうすれば良いのか?
ちゃんと用意されているんです!

【 :first-of-type 】

これこそ私の求めていた結果を導くセレクタ!

 

ということでCSSを下記に変更

div p:first-of-type {
color: #FF0000;
}

 

そうすると・・・

タイトル
ここは赤色
ここは普通

こうなります!まさに思った通り!

first-of-typeは最初の対応するタグに対してかかるってことですね。

 

ということで用途によってしっかり使い分けが必要ですね。
理解していると思っていても理解しきれていないCSS・・・奥が深い。。

Recommended Reading