:first-child の使い方を勘違いした

2015-07-13

:first-child擬似クラスは、IE７から対応しているためよく使われる擬似クラスですよね、何度も使っていたにもかかわらず勘違いしたので戒めとして書き記しておきます。

:first-child擬似クラスは、親要素の一番最初の直下の子要素に適用されます。

正しくない例１

<article class="demo1">
		<h2>タイトルなんちゃら</h2>
		<p>テキストほげほげ</p>
		<p>テキストほげほげ</p>
		<p>テキストほげほげ</p>
	</article>

css

.demo1 p:first-child{
		color:#f00;
	}

articleの最初の子要素は「h2」なので適用されません。

【解決方法1】　隣接セレクタを使う

<article class="demo2">
		<h2>タイトルなんちゃら</h2>
		<p>テキストほげほげ</p>
		<p>テキストほげほげ</p>
		<p>テキストほげほげ</p>
	</article>

.demo2 h2+p{
		color:#f00;
	}

DEMO

【解決方法2】　:first-of-typeを使う

:first-of-type疑似クラスとは、指定した種類の最初の要素に適用される。
対応しているのはIE9以降なのでそこ注意

<article class="demo3">
		<h2>タイトルなんちゃら</h2>
		<p>テキストほげほげ</p>
		<p>テキストほげほげ</p>
		<p>テキストほげほげ</p>
	</article>

css

.demo3 p:first-of-type{
		color:#f00;
	}

DEMO

間違った例：２

これは全くの勘違い。親要素に:first-childをつっくければ、その最初の子要素に自動的にスタイルが適用されると思っていたという恥ずかしい話。

<article class="demo4">
		<p>テキストほげほげ</p>
		<p>テキストほげほげ</p>
		<p>テキストほげほげ</p>
	</article>

間違ったcss

article:first-child{
		color:#f00;
	}

正しくは

	article p:first-child{
		color:#f00;
	}

DEMO