【CSSセレクタ】E:first-of-type

style.css

/* div要素の中の最初のdiv要素を赤字にする */
div div:first-of-type { color: red;}

/* ul内の最初のli要素にスタイルを当てる */
ul li:first-of-type { font-weight: bold; color: #2c3e50;}

/* テーブルの最初のth要素に背景色をつける */
tr th:first-of-type { background-color: #3498db; color: white;}

/* 画像の最初の1枚だけを大きく表示 */
.gallery img:first-of-type { width: 100%; grid-column: 1 / -1;}

/* p要素の最初だけマージン上をなくす */
.article p:first-of-type { margin-top: 0;}

div div:first-of-type { color: red;} /* div要素の中の最初のdiv要素を赤字にします。 */

<div>
	<p>ここはp要素です。</p>
	<div>ここはdiv要素です。</div>
	<p>ここはp要素です。</p>
	<div>ここはdiv要素です。</div>
</div>

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

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

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

全ての最初の子要素を指定したい場合は『*:first-of-type』もしくは『:first-of-type』と指定します。この場合は子要素として存在している全ての要素名ごとにカウントした最初の要素に対して適用されます。例えば子要素にp要素、span要素が存在した場合は最初のp要素と最初のspan要素にそれぞれデザインが当たります。

div :first-of-type { color: red;} /* 子要素の要素名ごとにカウントした最初の子要素を赤字にします。 */

<div>
	<div>ここはdiv要素です。</div>
	<p>ここはp要素です。</p>
	<div>ここはdiv要素です。</div>
	<p>ここはp要素です。</p>
</div>

※ バージョン情報は MDN に基づいています。