CSSの深淵へようこそ。
現場でコードを書いていて、「なんでこのスタイルが当たらないんだ？」と頭を抱えた経験、誰にでもあるはずだ。特に `:first-of-type` は、その名前からくる直感的なイメージと、ブラウザが裏側で処理している「型（Type）」ベースの仕様との間に、微妙なズレがある。
今回は、この「一見簡単そうだが、実は深い」`:first-of-type` の本質と、現場で事故を起こさないための正しい付き合い方を解説しよう。
—
1. `:first-of-type` の核心は「タグ名」にある
多くのエンジニアが犯す勘違いは、`:first-of-type` を「親要素の中にある最初の要素」と捉えてしまうことだ。だが、実際は違う。
仕様の定義：
「親要素の直接の子要素の中で、そのタグ型（要素名）として最初に出現するもの」を選択する。
つまり、`div:first-of-type` と書けば、親の中にある「最初の `div`」を指す。たとえその `div` の前に `h1` や `p` が10個並んでいようが、関係ない。ブラウザはDOMツリーを走査し、「おっ、こいつは `div` 型だな。こいつより上に `div` はあるか？」と確認しているわけだ。
注意すべき「罠」
もし君が、マークアップの構造を頻繁に入れ替えるようなコンポーネントを作っているなら、この擬似クラスには注意が必要だ。
最初の段落（これは無視される）
/ 最初のpを狙ったつもりでも、divが最初に現れるdivとして認識される /
div:first-of-type {
border: 2px solid #ff4757; / 鮮やかな赤で強調 /
}
—
2. ブラウザが裏側でやっていること
ブラウザのレンダリングエンジンは、CSSOMを構築する際、セレクタを右から左へ読み解く。`:first-of-type` に遭遇したとき、エンジンは以下のようなステップを踏む。
1. 型（要素名）の特定: セレクタが `div:first-of-type` なら「div」という型を保持する。
2. 親の走査: 対象要素の親要素へ遡り、その子要素リストを先頭から順にチェックする。
3. カウント: 同じ型（今回なら `div`）が登場するたびにカウンターをインクリメントする。
4. 判定: カウンターが「1」のとき、かつ現在対象としている要素と一致したとき、スタイルを適用する。
この仕組みを知っておくと、「なぜ “ セレクタと組み合わせると面白い挙動をするのか」が見えてくる。たとえば `:first-of-type` と書くと、親要素の中にある「各タグ型の最初の子」がすべて選択される。これは、リストや複雑なグリッドの最初をリセットしたいときに非常に強力な武器になる。
—
3. 実務で使えるベストプラクティス：DRYなスタイル定義
現場でよくある「最初の子だけ余白を消したい」というケース。`:first-child` を使うと構造依存が強すぎて詰むことがあるが、`:first-of-type` なら柔軟性が増す。
/ リスト内の最初の要素にはマージンを適用したくないが、
途中で別のタグ（h2など）が入る可能性がある場合 /
.card-content p:first-of-type {
margin-top: 0; / 最初のpタグだけ余白を詰める /
}
/ 応用：全要素の最初だけボーダーを消す（汎用的） /
.container > :first-of-type {
border-top: none;
}
現場からのアドバイス
もし君がチームで開発しているなら、「構造の変更に強い CSS」を書くことを心がけてほしい。`:first-of-type` は、HTMLのタグ構造が多少入れ替わってもスタイルが崩れにくいというメリットがある。一方で、`:first-child` は「とにかく一番最初の子」という絶対的な位置を指す。
- `:first-child`: 構造がガチガチに決まっているとき（モーダルのヘッダーなど）
- `:first-of-type`: コンテンツが動的で、タグの種類が混在するとき（ブログの本文やCMS出力など）
このように使い分けるのが、熟練のフロントエンドエンジニアの流儀だ。
—
まとめ：結局のところどう使うべきか？
`:first-of-type` は「最初の要素」ではなく「最初の型」である。この一点を腹落ちさせておけば、もうデバッグで迷うことはない。
もし、意図した要素にスタイルが当たらないなら、その要素より上に「同じタグ名」の兄弟要素が隠れていないか、開発者ツールの要素パネルを一度見直してみてくれ。CSSのトラブルの9割は、セレクタの仕様理解と、DOM構造の認識のズレから生まれる。
明日からのコーディングで、この「型」という視点を意識してみてほしい。君の書くCSSが、より堅牢で予測可能なものになるはずだ。
また何か壁にぶつかったら、いつでも聞きに来い。現場のリアルな知見を、また共有させてもらう。
コメント