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

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>