CSS：勘違いしがちな:first-child

擬似クラスの:first-childで思い通りに効かなかったことありませんか？

まずは思っているとおりにスタイル指定がされているコード。

CSSコード

.sample1 p:first-child{
color:#ff0000;
font-weight:bold;
}

HTMLコード

<div class="sample sample1">
<p>1つ目のpタグ</p>
<p>2つ目のpタグ</p>
<p>3つ目のpタグ</p>
</div><!-- sample -->

.sample1のひとつ目のpへスタイル指定が効いていますね。

そして次に思いどおりにスタイルが効いていない時のコード。

CSSコード

.sample2a p:first-child{
color:#ff0000;
font-weight:bold;
}

HTMLコード

<div class="sample sample2a">
<h1>なんかしらのタイトル</h1>
<p>1つ目のpタグ</p>
<p>2つ目のpタグ</p>
<p>3つ目のpタグ</p>
</div><!-- sample -->

あれ？h1が入っただけでなんで？
.sample2aの中の最初のpにスタイルがかかるようにしてるのに、どこにもかかってない！

よく理解ができないので、とりあえず書いてみる。
pではなく、*にしてどのタグにでも効くようにしてみると・・・

CSSコード

.sample2b *:first-child{
color:#ff0000;
font-weight:bold;
}

HTMLコード

<div class="sample sample2b">
<h1>なんかしらのタイトル</h1>
<p>1つ目のpタグ</p>
<p>2つ目のpタグ</p>
<p>3つ目のpタグ</p>
</div><!-- sample -->

h1にスタイルがかかりました。予想通り。
けど、最初のpにスタイルをかけたいのよ。

ここでようやく:first-childについて調べてみる。

適用対象
要素内の最初の子要素

:first-child擬似クラス－スタイルシートリファレンス

「要素内の最初の子要素」？？？どうやらものすごい勘違いしていました。

CSSコード

.sample p:first-child{}

じゃあ、このコードって、「.sampleの最初の要素がpだったらスタイルを反映させる」っていうことか！！！なんかものすごい限定的な使い方な擬似クラスだな。

じゃあ、divの中の最初のpにだけ効くCSSって書けないのかと思いいろいろ考えてみたところ、これだと思う。

CSSコード

.sample2c p:first-child,
.sample2c h1+p{
color:#ff0000;
font-weight:bold;
}

HTMLコード

<div class="sample sample2c">
<h1>なんかしらのタイトル</h1>
<p>1つ目のpタグ</p>
<p>2つ目のpタグ</p>
<p>3つ目のpタグ</p>
</div><!-- sample -->

けど、最初に来るのがh1じゃなくなったらこのスタイル効かないし、違うパターンだ出てきたらそのパターン分セレクタを増やさないといけないしな。

もっといい方法が無いか違う手を考える。Googleさんの力を借りて。

ありました！！！どうやら自分が探し求めていたのは:first-of-typeらしいです！
では、早速確認！！！

CSSコード

.sample3 p:first-of-type{
color:#ff0000;
font-weight:bold;
}

HTMLコード

<div class="sample sample3">
<p>1つ目のpタグ</p>
<p>2つ目のpタグ</p>
<p>3つ目のpタグ</p>
</div><!-- sample -->

効いてる！

HTMLコード

<div class="sample sample3">
<h1>なんかしらのタイトル</h1>
<p>1つ目のpタグ</p>
<p>2つ目のpタグ</p>
<p>3つ目のpタグ</p>
</div><!-- sample -->

効いてる効いてる！

HTMLコード

<div class="sample sample3">
<h1>なんかしらのタイトル</h1>
<ul><li>項目a</li><li>項目b</li><li>項目c</li></ul>
<p>1つ目のpタグ</p>
<p>2つ目のpタグ</p>
<p>3つ目のpタグ</p>
</div><!-- sample -->

pの前にどんなタグがあろうとも、スタイルが反映されている！！！

今まで:first-childでしていたことは全て:first-of-typeを使えば良かったってことなんですね！！！

ブラウザ実装状況

ただ気がかりなのが、ブラウザ実装状況です。特にIE・・・

:first-childのブラウザ実装状況

:first-childのブラウザ実装状況はIE7からされています。

:first-child - CSS | MDN

:first-of-typeのブラウザ実装状況

:first-of-typeのブラウザ実装状況はIE9から

:first-of-type - CSS | MDN

IE9からか。。。実務ではまだちょっと使いづらい擬似クラスかもしれないけど、お前を欲していたぞ、:first-of-type！！！