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

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

author : koki

publish date :

擬似クラスの: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からされています。

デスクトップ
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート4.03.0 (1.9)79.54
モバイル
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート1.01.0 (1.9.1)710.03.1

:first-child - CSS | MDN

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

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

デスクトップ
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート1.03.5 (1.9.1)9.09.53.2
モバイル
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート2.11.0 (1.9.1)9.010.03.2

:first-of-type - CSS | MDN

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