【実務・中級編】 first-of-type疑似クラスの仕様 – CSS実践ガイド

現場で絶対にやらかす「:first-of-type」の誤解。ブラウザの評価ロジックから学ぶ、CSSセレクタの正しい付き合い方

フロントエンドの現場を率いるチーフアーキテクトの立場から、今日もコードレビューでよく見かける「あの問題」について話をしよう。

マークアップを進める中で、誰もが一度は「特定の要素の最初のターゲットにだけスタイルを当てたい」という場面に遭遇するはずだ。そして、多くのメンバーが「お、`:first-of-type`を使えば一発だな」とキーボードを叩く。

しかし、ブラウザを開いてみると、意図した要素にスタイルが当たっていなかったり、あるいは関係のない別の要素にまでスタイルが適用されてしまって、「えっ、なんで！？」と頭を抱える。

今回は、CSS仕様の裏側にあるブラウザの処理ロジックを解き明かしながら、`:first-of-type`の真実と、現場で二度とバグを生まないための実践的なテクニックを伝授する。

—

1. そもそも `:first-child` と `:first-of-type` は何が違うのか？

まずは基本の整理から始めよう。ここを曖昧にしたまま「なんとなく」使っていると、複雑なHTML構造になった瞬間に破綻する。

• `:first-child`

「親要素から見て、最初の子要素」である場合のみマッチする。

• `:first-of-type`

「親要素から見て、その要素と同じタグ名（要素型）の中で最初の要素」にマッチする。

言葉で書くとシンプルだが、実例を見るとその挙動の差が明確になる。

このHTMLに対して、以下のCSSを当ててみよう。

/ パターンA：:first-child /
p:first-child {
color: red; / 反映されない！ /
}

/ パターンB：:first-of-type /
p:first-of-type {
color: blue; / ②の「最初の段落テキスト」が青になる！ /
}

なぜパターンAは赤くならないのか？

ブラウザは `p:first-child` を評価するとき、「まずそれが `p` タグであり、かつ『親要素の1番目の子ども』であるか」を見る。このHTMLにおける最初の子ども（①）は `span` タグだ。したがって、`p:first-child` は「該当なし」となり、何も染まらない。

なぜパターンBは青くなるのか？

一方、`p:first-of-type` は、「親要素内のすべての `p` タグ（要素型）の中で、最初の `p` タグ」を探す。①の `span` は無視され、`p` タグの中で一番最初に出現する ② がターゲットになる。

ここまでは「基本」だ。中級エンジニアの君なら、ここまでは理解できているかもしれない。
では、次に進もう。現場のエンジニアが最も頻繁に踏み抜く「大いなる罠」の話だ。

—

2. 【超重要】なぜ `.card:first-of-type` はあなたの意図通りに動かないのか？

現場のコードレビューで私が最も多く却下するのが、以下のようなコードだ。

/ 意図：.cardクラスを持つ最初の要素を赤くしたい /
.card:first-of-type {
border-color: red; / 結果：何も起きない、もしくは意図しない挙動になる /
}

「`.card` の中で最初の要素に当てるんだから、これでいいでしょ？」と思うかもしれない。しかし、これは動かない。

なぜか？
ブラウザは、このセレクタを「`.card` クラスを持つ要素の中で最初のもの」とは解釈しないからだ。

ブラウザの裏側の評価ロジック：CSSは「右から左」に解析される

ブラウザのレンダリングエンジン（BlinkやWebkitなど）がCSSセレクタを評価する順序は、我々人間が読む方向とは逆、つまり 「右から左（Right to Left）」 である。

`.card:first-of-type` というセレクタを、ブラウザは以下のようなステップで処理している。

1. まず右側（`:first-of-type`）を見る。
ブラウザは「親要素の中で、そのタグ名（要素型）において最初の要素」をすべてピックアップする。
※ここが最大のポイントだ。`:first-of-type` の「type」とは、クラス名のことではなく、`div` や `p`、`span` といったHTMLタグの要素型（Element Type）を指す。
2. 上記のHTMLにおいて、`div` タグの中で一番最初に出現するのは `