:first-of-type セレクター解説
CSS3 セレクター :first-of-type とクラス名の組み合わせ
CSS3 セレクター :first-of-type は、特定の要素の親要素内の同種の要素のうち、最初に現れる要素を指定します。つまり、要素の型が同じ兄弟要素の中で一番最初である場合にマッチします。
クラス名 と組み合わせることで、さらに特定の要素を絞り込むことができます。例えば、次のような HTML 構造を考えます。
<div class="container">
<p class="paragraph">段落1</p>
<p class="paragraph">段落2</p>
<p class="paragraph">段落3</p>
<div class="box">ボックス</div>
<div class="box">ボックス</div>
</div>
この場合、次の CSS ルールは、クラス paragraph を持つ要素のうち、最初の要素 (つまり、"段落1") にスタイルを適用します。
.container .paragraph:first-of-type {
color: red;
}
これにより、"段落1" のテキストが赤色になります。
- 実際の使用例では、HTML 構造や必要なスタイルに応じて、適切なセレクターを組み合わせます。
- クラス名と組み合わせることで、さらに特定の要素を絞り込むことができます。
:first-of-typeは、同種の要素の中で最初に現れる要素を指定します。
注意
:first-of-typeは、親要素内の同種の要素の中で最初に現れる要素を指定します。兄弟要素内の全ての要素を対象とするわけではないことに注意してください。
HTML 構造
<div class="container">
<p class="paragraph">段落1</p>
<p class="paragraph">段落2</p>
<p class="paragraph">段落3</p>
<div class="box">ボックス</div>
<div class="box">ボックス</div>
</div>
CSS ルール
.container .paragraph:first-of-type {
color: red;
}
解説
color: red;：対象の要素 (つまり、"段落1") のテキスト色を赤色にします。:first-of-type：親要素内の同種の要素のうち、最初に現れる要素を指定します。この場合、クラスparagraphを持つ要素の中で最初に現れる要素 (つまり、"段落1") を対象とします。.container .paragraph：クラスcontainerの子要素であるクラスparagraphの要素を指定します。
結果
上記の CSS ルールを適用すると、"段落1" のテキストが赤色になります。
:first-of-type セレクター解説
具体的な例
<div>
<p>段落1</p>
<p>段落2</p>
<span>スパン1</span>
<span>スパン2</span>
</div>
span:first-of-type：最初のスパン要素 (<span>スパン1</span>) を指定します。
注意点
応用例
- リスト要素の最初の項目を目立たせる。
- フォーム要素の最初のラベルを強調する。
- 特定の要素に対して、最初の子要素に特別なスタイルを適用する。
:first-of-type の代替方法
:first-of-type セレクターは、親要素内の同種の要素のうち、最初に現れる要素を指定する便利な方法です。しかし、場合によっては、他の方法でも同様の結果を実現することができます。
CSS の :nth-child() セレクター
:nth-child() セレクターは、親要素内の特定の子要素を指定する際に使用できます。最初の要素を指定するには、次のようにします。
.container .paragraph:nth-child(1) {
color: red;
}
この例では、クラス container の子要素であるクラス paragraph のうち、最初の要素 (つまり、"段落1") にスタイルを適用します。
JavaScript を使用した DOM 操作
JavaScript の DOM 操作を使用して、プログラム的に最初の要素を取得し、スタイルを適用することもできます。
const firstParagraph = document.querySelector('.container .paragraph:first-of-type');
firstParagraph.style.color = 'red';
このコードでは、querySelector() メソッドを使用して、クラス container の子要素であるクラス paragraph のうち、最初の要素を取得し、その要素のテキスト色を赤色に設定します。
CSS の :where() セレクター
:where() セレクターは、複数のセレクターを組み合わせることができます。最初の要素を指定するには、次のようにします。
.container .paragraph:where(:first-of-type) {
color: red;
}
:has() セレクターは、特定の子要素を持つ要素を指定できます。最初の要素を指定するには、次のようにします。
.container .paragraph:has(:first-of-type) {
color: red;
}
選択の基準
どの方法を選択するかは、プロジェクトの要件や個人の好みによって異なります。一般的に、:first-of-type はシンプルで読みやすいですが、他の方法も特定の状況で有用な場合があります。
- パフォーマンス
どの方法が最もパフォーマンスに優れているかは、ブラウザの実装や他の要因によって異なります。 - 柔軟性
:nth-child()や JavaScript を使用すると、より柔軟な制御が可能になります。 - シンプルさ
:first-of-typeは最もシンプルで直感的な方法です。
css css-selectors
