first-of-typeにクラス名は指定できる？CSS疑似クラスの使い方と適用条件を解説

CSSの疑似クラス:first-of-typeと、クラス名（class）を組み合わせて「first-of-type クラス名」を実現したいという要望は、Web開発でよくあります。どこまでCSSの標準仕様で可能か、ブラウザ対応や回避策も含めて、理解しておくことが重要です。本記事ではその疑問に沿って、first-of-typeとクラス名の関係、使い方、限界、代替手段を詳しく解説します。

first-of-type クラス名とは何かとその検索意図

「first-of-type クラス名」というキーワードで検索する人は、疑似クラス:first-of-typeを使って特定のクラスを持つ要素の最初のものをCSSでスタイリングしたいと考えています。具体的には、ある親要素内でクラス名が付いた要素のうち最初の要素だけにスタイルを適用したいという意図です。

この検索意図には次のようなニーズが含まれています：
・first-of-type疑似クラスにクラス指定を組み合わせて、タグの種類＋クラス名で対象を絞りたい
・最初のクラス付き要素を直接ターゲットしたいがCSSで可能かどうか知りたい
・ブラウザの互換性やCSS仕様での制約を理解したい

疑似クラス:first-of-typeの基本

:first-of-typeは、CSSセレクタレベル3で定義された構造疑似クラスで、親要素の中で同じタグ名を持つ要素のうち最初のものを選択します。class属性やid属性に依存せず、タグ名（要素の種類）によって「タイプ」を判定します。class名だけではfirst-of-typeの対象とはなりません。

クラス名を使ったスタイリングの要望

Web開発者は、「同じタグとクラス名を持つ複数要素の中で、最初のクラス付き要素だけに異なるスタイルを適用したい」という状況に遭遇します。たとえば同じdivタグでclass=”item”が複数ある中で、最初の.itemにだけカラーを変えたいといった要望です。

よくある誤解と制約

「.myclass:first-of-type」が最初の.myclass要素を選択すると思われがちですが、その文法では「親要素の中で最初のタイプ（タグ名）を持った要素であり、かつクラスが.myclassである要素」という意味になります。したがって、タグ名が異なる要素が先に存在する場合、期待通りに機能しません。

first-of-typeにクラス名を指定する方法とその適用条件

疑似クラス:first-of-typeを使ってclass名付き要素をターゲットするには、いくつか基本的な条件とその設定方法を理解しておく必要があります。ここでは最新の仕様や一般的な使用例を含め、適用できるケースとできないケースを明らかにします。

条件1：同じタグ名でclass要素が複数あるケース

もしclass名を持つ要素がすべて同じタグ名（例えばすべてdivかpなど）であれば、タグ名と:first-of-typeを組み合わせて「最初のそのタグ名」を対象にできるため、期待に近い結果を得ることができます。例えば「div.myclass:first-of-type」のように書くことで、その親要素内で最初に現れるdivタグであり、かつclassがmyclassのものにスタイルを当てます。ただし、他のdivタグが先に来ると対象にならなくなります。

条件2：タグ名が混在しているケース

class付き要素が異なるタグ名で混在している場合、first-of-typeはタグ名に基づく選定を行うため、期待通りのclass要素がターゲットにならない可能性があります。たとえばp.myclassとdiv.myclassがあり、divのほうが先なら、p.myclass:first-of-typeはdivより後でも最初のpではありますが、最初の.myclassとしては選ばれません。

Condition3：ブラウザ対応と最新仕様

CSS Selectors Level 4仕様では、「:nth-child(1 of S)」という文法が導入され、特定のセレクタS（例えばクラス名）を条件にしてその中での最初のものを指定できるようになっています。しかし、現状ではブラウザ対応が完全ではなく、特定のブラウザでのみ利用可能なことがあるため、プロダクション用途では注意が必要です。

クラスを使って最初の要素を選ぶ代替手段

疑似クラス:first-of-typeで期待した動作が得られない場合、代替手段を使うことで最初のクラス付き要素をスタイルできるようになります。ここでは標準的なCSSでの回避策や最新の仕様利用例を紹介します。

隣接セレクタと:notを使った方法

.myclass ~ .myclassという一般兄弟セレクタを利用することで、同じclassを持つ要素のうち二番目以降をスタイルし、最初のものだけ別のスタイルにできます。例えば.myclass {あるスタイル}と.myclass ~ .myclass {別のスタイル}を使うと、最初の.myclassのみ最初のスタイルが適用され、後続する.myclass要素では後者のスタイルに上書きできます。

:nth-child(1 of .class) の使用（仕様レベル4）

最新の仕様では「:nth-child(1 of .myclass)」のような書き方が可能になっており、クラス名を条件に最初の要素を直接選択できます。この方法がサポートされているブラウザを確認すれば、よりシンプルに目的が達成できます。ただしすべての環境で使えるわけではありません。

JavaScriptを使って動的にクラスを付ける方法

CSSだけでは対応できない場合、JavaScriptを使って親要素の中から最初のクラス付き要素を検出し、そこに別のクラスを付与する方法も現実的です。DOM APIを使えばdocument.querySelectorやparent.querySelectorなどで最初の要素を取得し、classList.addでスタイリング用クラスを付与できます。

実用例と比較：どの方法をいつ使うか

実際の現場では、対象となるHTML構造やブラウザ対応、保守性を考えて最適な方法を選択することが大切です。ここでは具体的なコード例と比較表を使って方法ごとの利点と欠点を整理します。

例1：同じタグ名でclass名のみ複数ある場合

例えば親要素に複数の