CSSの「兄弟」たちと対峙する：`:first-child` / `:last-child` / `:only-child` の深淵
フロントエンドの戦場において、我々は常に「予測不能な動的コンテンツ」と戦っている。APIから流し込まれるデータ、CMSが吐き出すタグの群れ。それらがDOMツリーを構築する際、CSSで「最初」や「最後」をどう制御するかは、単なる見た目の問題ではない。それはCSSOM（CSS Object Model）の再計算コストを最小化し、レイアウトシフトを防ぐための、立派なエンジニアリングだ。
今回は、最も基本的でありながら、実はブラウザのレンダリングエンジンと密接に関わる `:first-child`, `:last-child`, `:only-child` の深層に潜り込む。
1. ブラウザエンジンから見た「兄弟」の選別
まず、この擬似クラスを「ただの装飾」と捉えてはならない。ブラウザはこれらを処理する際、DOMノードの親を特定し、その配下にある兄弟要素（Sibling）のインデックスを計算する。
ここで重要なのは、「`:first-child` は要素の型を見ない」という仕様だ。これは多くのエンジニアが陥る罠だが、`:first-child` は「親の最初の子」が「指定されたセレクタと一致するか」を判定する。
/ 良い例：特定のクラスを持つ要素に限定する /
.list-item:first-child {
border-top: none;
}
/ 危険な例：タグ名に依存すると、DOM構造の些細な変更で崩壊する /
div:first-child {
margin-top: 0;
}
もし、将来的にCMSのテンプレートが変更され、`div` の前に `h2` や `p` が挿入された瞬間、このCSSは死ぬ。堅牢なアーキテクチャを目指すなら、要素名に依存したセレクタは捨て去り、コンポーネントクラスに対して擬似クラスを適用すべきだ。
2. レンダリング負荷とパフォーマンス最適化
大規模なアプリケーションにおいて、擬似クラスの多用は「スタイルの計算コスト」に直結する。特に、複雑なネスト構造の中でこれらの擬似クラスを多用すると、ブラウザは再計算（Recalculation）時にDOMツリーを深く探索する必要がある。
特に `:last-child` は、DOMの末尾を知るために親要素の全ての子を走査する可能性がある。動的に要素が追加・削除される SPA（ReactやVueなど）では、この再計算がレンダリングのボトルネックになることもある。
高速化のヒント：セレクタの特異性を下げる
擬似クラスは可能な限り「単独」か「クラスとの組み合わせ」に留める。
/ ベターなアプローチ /
.card-wrapper > .card:last-child {
margin-bottom: 0;
}
/ 非推奨：過度な修飾による計算負荷の増大 /
.main-container .section-group > .item:last-child:not(.is-active) {
/ これをレンダリングするたびにブラウザは計算を強いられる /
}
3. 非同期読み込みと「only」の罠
`:only-child` は、その親の中に「唯一の要素」として存在する場合にマッチする。これは非常に強力だが、非同期でコンポーネントがマウントされる環境では、タイミングによって一瞬だけ「2つ以上」の要素が存在し、レイアウトがガタつくことがある。
/ スケルトンスクリーンや非同期リストでの活用例 /
.list-container .item {
/ 通常時は余白を持つ /
margin-bottom: 1rem;
}
.list-container .item:only-child {
/ 唯一の要素なら余白を消す（カードの単体表示など） /
margin-bottom: 0;
}
ここで注意すべきは、非同期データロード時にDOMがフラッシュすることだ。これを防ぐには、CSSだけで解決しようとせず、データの件数に基づいて `is-single` のようなフラグクラスをJS側で付与する方が、UIの安定性は劇的に向上する。CSSはあくまで「状態を表現する」ものであり、ロジックを肩代わりさせるのは限界がある。
4. 現場で生き残るための「境界線」の設計
最後に、実務において最も避けるべきは「マージンの衝突」だ。`last-child` を使って余白を消すのは定石だが、よりモダンなアプローチとして「負のマージン」や「Gapプロパティ」を検討してほしい。
/ Flexbox や Grid を使うのが、現代のフロントエンドの解である /
.container {
display: flex;
flex-direction: column;
gap: 16px; / これだけで :last-child の余白制御から解放される /
}
`gap` を使えば、最初や最後の余白を個別に消す必要はなくなる。ブラウザの描画負荷も低く、コードの可読性も高い。
結論：技術の使い所を弁える
`:first-child`, `:last-child`, `:only-child` は、CSSの「文法」としては非常にシンプルだが、その背後にあるブラウザのレンダリングの仕組みを知ることで、より賢く使いこなすことができる。
1. 要素型セレクタを避ける: クラス名で制御し、構造の変化に強くする。
2. 計算コストを意識する: 過剰なセレクタ連結を避け、ブラウザに優しいCSSを書く。
3. 最新のCSSプロパティで代替する: 可能な限り `gap` や論理プロパティを活用し、擬似クラスへの依存度を下げる。
CSSは、ただ書くだけなら誰でもできる。しかし、数万行のスタイルシートの中で「壊れないUI」を維持し、ブラウザのリソースを極限まで引き出すことこそが、上級エンジニアとしての矜持だ。君たちのコードが、美しく最適化されていることを願っている。
コメント