CSS

The `:first-of-type` selector is a CSS selector used to apply styles to the first element of a specific tag type within the same parent element.

:first-of-type

　:first-of-typeセレクタは、CSSで特定の要素が同じ親要素の中で最初に現れるかどうかを選択するためのセレクタです。例えば、親要素の中で最初の段落タグや最初のリスト項目などをスタイル設定したい場合に使います。

使用例

　以下のHTML構造を例に考えてみます。

<div class="container">
	<p>最初の段落</p>
	<p>二番目の段落</p>
	<span>スパン要素</span>
</div>

　この場合、最初の段落にだけ特定のスタイルを適用したいとします。以下のように CSSを記述します。

.container p:first-of-type {
	color: red;
}

　この CSSは、クラスが containerである div要素の中の最初の <p>要素に赤い色を適用します。この場合、「最初の段落」のテキストが赤色になります。

注意点

• :first-of-typeは、同じタイプ（同じタグ）の最初の要素を対象とします。
• 親要素の中で最初に現れるそのタイプの要素に適用されます。