【CSS Modules】:first-of-type疑似クラスの使い方

:first-of-typeオブジェクトは、CSSにおいて、親要素内で指定された種類の要素として最初に出現する子要素を表すオブジェクトです。これは、HTMLの構造において、特定のタグ名を持つ要素のグループの中から、一番最初に登場する要素にスタイルを適用したい場合に利用される疑似クラスです。

例えば、ある<div>要素の中に複数の<p>タグと<span>タグが混在している状況を考えます。このとき、p:first-of-typeというセレクターを使用すると、その<div>要素内で最初に見つかる<p>要素のみが選択されます。もし<p>タグの前に他の種類の要素（例えば<span>など）があったとしても、:first-of-typeはあくまで同じ種類の要素（この場合は<p>タグ）の中での出現順序を基準とします。

似たような機能を持つ疑似クラスに:first-childがありますが、これは親要素内のすべての子要素の中で最初に登場する要素を選択します。したがって、もし最初の子要素が指定したタイプではない場合、:first-childでは選択されませんが、:first-of-typeでは同じ種類の最初の要素が選択されるため、結果が異なることがあります。:first-of-typeは要素のタイプを重視し、:first-childは要素の全体的な位置を重視するという違いを理解することが、適切なセレクター選択の鍵となります。

このセレクターは、記事の導入部分の段落やリストの最初の項目など、特定の構造を持つコンテンツの特定部分を強調表示する際などに非常に役立ちます。システムエンジニアを目指す方々にとって、ウェブページの構造とスタイル指定の論理的な関係を深く理解するために重要な概念の一つです。

Copy
1element:first-of-type {
2  /* プロパティと値 */
3  color: blue;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません