【CSSセレクタ】E:first-child

『セレクタ:first-child』で、最初の子要素に適用できます。こちらは一般に『擬似クラス』と呼ばれます。『:nth-child(1)』と指定した場合と等価です。IE7以下では動きません。

全ての最初の子要素を指定したい場合は『*:first-child』もしくは『:first-child』と指定します。注意点として、『>』等を記述せずに単純に『:first-child』と記述した場合は子孫要素全てに対する最初の子要素に適用されます。例えば『div :first-child』と記述した場合はdiv要素の子孫要素全ての最初の要素にデザインが当たります。尚、『テキストノード』(匿名ブロック)は無視されます。

サンプルコード

div.hoge :first-child { color: red;} /* 『hoge』というクラス名を持つdiv要素の子孫要素全ての最初の要素を赤字にします。 */
div.hoge1 > :first-child { color: blue;} /* 『hoge1』というクラス名を持つdiv要素の最初の子要素を青字にします。 */

ブラウザでの表示結果

div.hoge :first-child { color: red;} /* 『hoge』というクラス名を持つdiv要素の子孫要素全ての最初の要素を赤字にします。 */
div.hoge1 > :first-child { color: blue;} /* 『hoge1』というクラス名を持つdiv要素の最初の子要素を青字にします。 */

<div class="hoge">ここはテキストノードです。テキストノードは無視されます。
	<p>ここは『hoge』というクラス名を持つdiv要素の中の最初のp要素です。</p>
	<div>
		<p>ここは『hoge』というクラス名を持つdiv要素の中のdiv要素の中の最初のp要素です。</p>
		<p>ここは『hoge』というクラス名を持つdiv要素の中のdiv要素の中の最後のp要素です。</p>
	</div>
	<p>ここは『hoge』というクラス名を持つdiv要素の中の最後のp要素です。</p>
</div>
<div class="hoge1">
	<p>ここは『hoge1』というクラス名を持つdiv要素の中の最初のp要素です。</p>
	<div>
		<p>ここは『hoge1』というクラス名を持つdiv要素の中のdiv要素の中の最初のp要素です。</p>
		<p>ここは『hoge1』というクラス名を持つdiv要素の中のdiv要素の中の最後のp要素です。</p>
	</div>
	<p>ここは『hoge1』というクラス名を持つdiv要素の中の最後のp要素です。</p>
</div>

注意点として要素名やid名、クラス名、属性などからの特定と『:first-child』を併用した場合、まず最初の要素かどうかの特定を行った後に、なおかつ指定された要素名、id名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:first-child』と指定した場合、子要素のうちの最初の要素がp要素で、なおかつ『hoge』というクラス名を持っていた場合に限りデザインが当たります。要素名から絞り込みをしたい場合は『:first-of-type』を使用してください。

div div.hoge:first-child { color: red;} /* div要素の子孫要素全ての最初の要素が『hoge』というクラス名を持ったdiv要素だった場合に赤字にします。 */

<div>
	<div class="hoge">ここはdiv要素の中の最初の『hoge』というクラス名を持つdiv要素です。</div>
	<div>
		<div>ここはdiv要素の中のdiv要素の中の最初のdiv要素です。</div>
		<div>ここはdiv要素の中のdiv要素の中の最後のdiv要素です。</div>
	</div>
	<div class="hoge">ここはdiv要素の中の最後の『hoge』というクラス名を持つdiv要素です。</div>
</div>