CSSで「first-of-type クラス名」というキーワードを聞くと、まず疑問になるのは「同じ型（タグ名）の最初の要素をどうクラスで狙うか」です。型の擬似クラス:first-of-typeはタグ名に紐付きクラス名だけでは対象とならないことがあります。この記事では、最新情報を踏まえ、まず概念を整理し、クラス名を伴わせる方法、既存ブラウザでの注意点やトラブルシューティングまで、詳しく解説します。CSSの理解を深めたい方に最適な内容です。
目次
first-of-type クラス名 が意味するものとは first-of-type クラス名
first-of-typeは、兄弟要素の中で同じタグ名（要素タイプ）の最初のものを対象にする擬似クラスです。タグ名が対象であり、クラス名が対象になるわけではありません。つまり、例えば<p>タグなら最初の<p>が対象です。
クラス名を付け加えたセレクタ（例えば p.myclass:first-of-type）を使うと、その要素が最初の<p>であり、かつクラス名も持っていることが条件になります。型の最初とクラスの所有、両方が成立したときだけスタイルが適用されるわけです。
first-of-type と first-child の違い
:first-childは親要素の最初の子要素そのものを指します。型やタグ名は問いません。タグの順序や型が混ざっていると、狙った要素に期待通り適用されない場合があります。
:first-of-typeは同じタグ名のみを数えるため、たとえhtml内で先に異なるタグがあっても、指定したタグの最初の要素にスタイルが当たります。タグタイプに応じてより柔軟です。
クラス名を伴って使う際の制約
先に触れたように p.myclass:first-of-type のような指定は、「その段階でその要素が最初の p」であり「myclass が付いている」ことが必要です。もし最初の p に myclass がなければ、この指定はその p ではなく次の p でも発動しません。
また、first-of-type はあくまでタグ名を基準にするため、クラス名だけを見て「クラス名を持つ最初の要素」を選ぶ機能ではないことを理解しておく必要があります。
first-of-type と nth-of-type(1) は同じか？
:nth-of-type(1) は :first-of-type と等価であるため、タグタイプの最初の要素を示す点では同じです。構文上は異なりますが、結果として得られる対象要素は同じことが多いため、可読性やチームのコーディング規約によって使い分けられることがあります。
ただし nth-of-type(1) の方が他のパラメータを使いやすいため、動的に複数番目の要素を指定する際にはこちらが便利ですし、 first-of-type の方が直感的で読みやすいという利点があります。
クラス名を使って first-of-type の効果を確実に出す方法
クラス名を伴わせて first-of-type のターゲティングを確実に発動させるには、HTML構造とCSSの優先順位を理解し、適切なセレクタを組む必要があります。特に兄弟要素のなかでの順序や親要素の構造が重要になります。
タグ＋クラス＋擬似クラスの組み合わせ
典型的な指定方法は「タグ名 .クラス名:first-of-type」とするものです。これは「そのタグの第一番目かつクラスを持つもの」が対象になります。例えば div.special:first-of-type なら、同じ親内で最初の div で special クラスも持つものにのみスタイルが当たります。
一般的な兄弟セレクタによる上書きテクニック
すべての対象クラス要素にスタイルを与え、それより後に出てくる同じクラスの要素に対して上書きすることで「最初だけ」が見た目上残るようにする方法があります。例えば.myclass { /* スタイル */ }.myclass ~ .myclass { /* 元のスタイルを打ち消す */}
最近導入された Selectors Level 4 の機能を活用する
Selectors Level 4 によって、nth-child や nth-last-child に「of クラス名」の機能が加わっており、「1 of .クラス名」のような指定でクラスを持つ最初の子を対象にできるようになってきました。ただしすべてのブラウザで完全に支持されているわけではないため、フォールバックを考慮する必要があります。
注意すべきブラウザ互換性とトラブルケース
どれだけ正しく CSS を書いても、ブラウザの対応状況や HTML の構造の影響で期待通り動かないことがあります。ここではよくあるトラブルとその対処策を整理します。
旧IEや古いブラウザでのサポート状況
:first-of-type 擬似クラスは CSS3 仕様の一部であり、主要なモダンブラウザでは問題なく動作します。しかし古いバージョンの Internet Explorer（例えば IE8 以下）では対応していないことがあります。したがって、IE をサポート対象外にできる場合は問題になりませんが、必要なら古いスタイルや別手段でフォールバックを用意します。
構造が異なるためにセレクタが機能しないケース
前述の通り、first-of-type はタグの最初であることが条件です。例えば類似のタグが先にあれば、その要素が first-of-type ではなくなります。クラスだけを見て「そのクラスを持つ最初」が動かないのはこのためです。
またネスト構造が深い場合、親子関係が期待と異なっていたり、兄弟要素と思っていたものが兄弟でない場合など、構造上のミスでセレクタがマッチしないことが多くあります。
スタイルの継承や優先順位で期待値とずれることも
特に同一セレクタやクラスのスタイルが複数定義されていたり、外部 CSS やテーマで強いセレクタが使われていたりすると、first-of-type を使ったスタイルが上書きされてしまうことがあります。セレクタの優先度（specificity）を確認し、必要ならより具体的なセレクタにするか、スタイルシートの読み込み順を調整します。
実用例で理解を深める first-of-type クラス名 の応用
ここでは、具体的な HTML 構造を想定したうえで、first-of-type とクラス名との組み合わせによる CSS の適用例を示します。実践で使えるパターンと注意点を確認しましょう。
例：記事の見出しリストに最初だけマークを付ける
例えば記事一覧を複数の記事要素で表示し、そのうち最初の記事にだけ特別なバッジや背景を付けたい場合を考えます。HTMLでは <article> 要素が続きますが、最初の記事だけに含まれる>div class=”featured”< という内部要素にスタイルを当てたい。
この場合、CSS 例：article.featured:first-of-type { 背景色など }
ただし article.featured:first-of-type が機能するためには、同じ親の中で最初の article 要素が featured クラスを持っていることが必要です。もし最初の article に featured が付いていなければ、この指定は発動しません。
例：複数クラスを持つ要素と兄弟セレクタで最初のクラス名対象を狙う
こういったケースでは.myclass { /* デフォルトスタイル */ }.myclass ~ .myclass { /* 上書きして最初以外の .myclass を元に戻す */}
この組み合わせで、「最初だけスタイルを残す」見た目ができます。ただしこのテクニックは、それ以降の .myclass 要素が兄弟でなければ機能しないので、HTML構造の確認が必須です。
例：Selectors Level 4 の of 構文を利用する（モダンブラウザ用）
モダン仕様をサポートするブラウザでは、次のような指定が可能な場合があります：
:nth-child(1 of .myclass) { スタイル } という形で、「クラス myclass を持つなかで最初の子」をターゲティングできます。
まだすべてのブラウザで対応しているわけではありませんが、テストしフォールバックを用意すれば、より直感的に記述できる方法です。
まとめ
first-of-type は标签型（タグ名）の最初の要素を狙う擬似クラスであり、クラス名だけで「クラスの最初」を狙うものではありません。
クラス名を伴う指定を確実に発動させたいなら、タグ名とクラス名、擬似クラス all three を組み合わせるか、兄弟セレクタを使って「最初だけスタイルを残す」手法を取る必要があります。
また、モダン仕様である Selectors Level 4 の新しい機能を導入することで、より表現力が上がりますが、ブラウザ対応は確認することが重要です。
HTML構造を意識し、CSSの優先度や兄弟要素との関係を理解すれば、「first-of-type クラス名」によるスタイル指定は確実に反映でき、保守性・可読性の高いCSSが書けます。
コメント