`:first-of-type` の深淵：ブラウザの描画パイプラインと「予期せぬDOM構造」への最適解
CSSのセレクタは、単なる「見た目の指定」ではない。それはブラウザのレンダリングエンジンに対する「DOMツリー探索の命令書」だ。特に `:first-of-type` は、直感的でありながら、大規模アプリケーションの複雑なDOM構造においては、しばしば開発者の期待を裏切る挙動を見せる。
なぜ多くのシニアエンジニアが、このセレクタの挙動に頭を抱えるのか。今日は、仕様の表面をなぞるのではなく、ブラウザの内部挙動とパフォーマンスの観点から、この「曲者」を完全に手懐ける方法を解説しよう。
—
`:first-of-type` は「型」をどう認識しているか
まず、この擬似クラスの定義を再確認しよう。`E:first-of-type` は、「親要素内で、同じタグ型の兄弟要素のうち、最初に出現するもの」を選択する。
ここでの注意点は、親要素内の「順序」ではなく「型（タグ名）」に依存しているという点だ。
/ 「親の中で最初に現れた
タグ」をターゲットにする /
p:first-of-type {
margin-top: 0;
}
このセレクタが強力なのは、HTMLの構造が動的に変わるCMSや、React/Vueのコンポーネントツリーにおいて、「特定のタグが先頭に来た時だけスタイルを適用する」という条件分岐をCSS単体で完結できる点にある。JSでの判定処理を減らすことは、メインスレッドの負荷軽減に直結する。
—
実務における「落とし穴」：DOM汚染と再計算コスト
我々のようなエンジニアが最も警戒すべきは、DOMが非同期で挿入される際の「スタイルの再計算（Recalculate Style）」だ。
例えば、以下のような構造があるとする。
最初の段落
もし、JSが非同期で `ad-wrapper` を挿入した瞬間、`p:first-of-type` の条件がどうなるか想像してほしい。`p` は「親の中で最初の `p`」ではなくなってしまう。結果として、意図しないスタイル崩壊が起きる。
回避策：セレクタの堅牢化（防御的CSS）
構造が不安定なコンポーネントでは、 `:first-of-type` を盲信せず、より限定的なクラスセレクタとの組み合わせを推奨する。
/ 脆弱な指定 /
.container p:first-of-type { color: red; }
/ 堅牢な指定：コンポーネントスコープを明確にする /
.container > .content-body:first-of-type { color: red; }
直系の子要素（`>`）を指定し、かつクラス名を噛ませることで、ブラウザの探索範囲を限定し、DOM構造の変化に対する耐性を高めることができる。これはパフォーマンス的にも有利だ。ブラウザは、より深い階層を探索するよりも、直系の子要素を特定する方が探索コストが低いからだ。
—
パフォーマンスを極限まで引き出す：CSSエンジンへの配慮
ブラウザ（特にBlinkやWebKit）のスタイル計算において、複雑な擬似クラスは「コストの高いセレクタ」になり得る。
1. マッチングの最適化: ブラウザは右から左へセレクタを解析する。`:first-of-type` を使う場合、ブラウザはまず「ターゲットの要素を探し」、次に「親要素の兄弟を遡って同じタグがないか」を確認する。
2. 兄弟要素の数: 兄弟要素が数千個あるリストの場合、`:first-of-type` の評価は軽微とはいえ、塵も積もれば山となる。特にスクロールイベントやアニメーションと組み合わせると、ガクつきの原因になり得る。
最適化の知見:
もし大量のリストアイテムに対して `:first-of-type` を多用しているなら、そのCSSを `nth-of-type(1)` に置き換えるメリットは少ないが、クラスベースの制御に切り替える方が、レンダリングエンジンのキャッシュ効率は向上する。
/
- 推奨：特定の状態をクラスで制御する
- JS側で `is-first` といったフラグを付与する方が、
- CSSの複雑な探索を回避でき、レンダリング負荷は低くなる。
/
.list-item.is-first {
border-top: none;
}
—
結論：プロとしてどう扱うべきか
`:first-of-type` は、DOMが静的であり、かつ構造が厳密に管理されているコンポーネントでは非常にエレガントなツールだ。しかし、Webアプリケーションの規模が大きくなり、非同期でDOMが書き換わる環境においては、「頼りすぎない」ことが最大の武器になる。
- 小規模なコンポーネント: `:first-of-type` で記述量を減らす。
- 大規模なUIコンポーネント: クラスセレクタによる明示的な制御を優先する。
CSSの最適化は、ただコードを短くすることではない。「ブラウザが迷わず、かつ最短ルートでDOMにスタイルを適用できる環境を作ること」だ。あなたの書くセレクタ一つ一つが、ブラウザのエンジンに対する対話であることを忘れないでほしい。
さて、次はどの擬似クラスの裏側を解剖しようか？ 現場の泥臭い課題があれば、いつでも持ち込んでくれ。
コメント