`:only-child` の深淵：ブラウザのレンダリングエンジンから見た「唯一無二」の条件式
CSSの擬似クラスの中でも、`:only-child` は一見するとシンプルで、初心者向けのチュートリアルで「リストが一つしかない時にスタイルを変えるやつでしょ？」程度に片付けられがちだ。だが、上級エンジニアである君たちには、その「単一性」の判定コストと、DOM構築プロセスにおける最適化のヒントが隠されていることを知ってほしい。
今日は、DOMの構造変化が激しいモダンなフロントエンド環境において、`:only-child` をどう「計算資源の節約」と「堅牢なUI実装」に活かすべきか、その裏側を紐解いていく。
1. `:only-child` の本質的な挙動とDOMトラバーサルの負荷
`:only-child` は、単に「親の中に子が一つか？」を判定しているわけではない。ブラウザの内部エンジン（BlinkやWebKit）は、スタイル再計算（Recalculate Style）のフェーズにおいて、対象要素の `parentNode` にアクセスし、その `childNodes` のコレクションを走査する。
もし君が巨大なDOMツリーを構築し、動的に要素を追加・削除するSPAを開発しているなら、過度なセレクタの複雑化は避けるべきだ。幸いなことに、`:only-child` は `:first-child` かつ `:last-child` と同等（あるいはそれ以上の効率）で処理されるよう最適化されている。
注意すべき「罠」
勘違いしてはならないのは、「テキストノード」の存在だ。
要素
ブラウザのDOMツリー上では、改行やスペースもテキストノードとして扱われることがある。もし君が「中身が何であれ、要素が一つだけなら」という条件でレイアウトを制御したい場合、DOM構造の純潔性（Cleanliness）を保つ必要がある。
2. 実践的なアーキテクチャ：動的なUIコンポーネントへの適用
実務で `:only-child` が真価を発揮するのは、カードUIやダイアログのレイアウト調整だ。例えば、「アイテムが1つしかない時は大きく表示し、複数ある時はグリッドにする」という実装は、JavaScriptでDOMを監視するよりも、CSSに任せたほうがレンダリングパイプラインを止めるリスクが低い。
.card-wrapper {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/ 子要素が1つしかない場合のみ、グリッドを解除して全幅にする /
.card-wrapper > :only-child {
grid-column: 1 / -1;
max-width: 600px;
margin: 0 auto;
}
このアプローチの利点は、非同期処理との競合を回避できる点にある。JSで `length` を計算してクラスを付与する手法は、フレームワークのレンダリングサイクル（Reactの `useEffect` 等）に依存し、一瞬レイアウトシフト（CLS）が発生する可能性がある。CSSセレクタなら、ブラウザの描画タイミングと同期するため、この「チラつき」を完全に排除できる。
3. パフォーマンス最適化と「重大なバグ」の回避策
上級者が最も恐れるべきは、「DOMの肥大化による再計算の連鎖」だ。
重大なバグ：再帰的な再計算
もし深い階層の親要素に対して `:only-child` を多用し、さらにその影響が兄弟要素のレイアウトにまで波及するようなCSSを書くと、ブラウザは「DOMツリーの兄弟関係」を何度も再評価することになる。
これを防ぐための鉄則：
1. セレクタのネストを浅く保つ: `:only-child` を含んだセレクタは、できるだけ限定的なクラス名と組み合わせる。
2. `Containment` プロパティの活用: 可能であれば `contain: layout;` を親要素に付与せよ。これにより、その要素内のスタイル変更がツリー全体に波及するのを防ぎ、レンダリング負荷を局所化できる。
.dynamic-list {
/ このコンテナ内のレイアウト変更を隔離し、レンダリング負荷を抑える /
contain: layout style;
}
.dynamic-list > .item:only-child {
/ ここでスタイルを制御しても、外部への影響が最小限に抑えられる /
background: var(–highlight-color);
}
結びに代えて：CSSは「宣言」であり「論理」である
`:only-child` は、単なる視覚的な装飾のための道具ではない。これは、DOMの構造という「データ」を、レイアウトという「ビュー」に変換する際、「もし唯一ならこうあるべき」という論理（ビジネスルール）を宣言するための記述だ。
エンジニアとして、JavaScriptで無理やり制御するのではなく、CSSの持つプリミティブな能力を最大限に引き出すこと。それが、ブラウザのエンジンを味方につけ、極限まで軽く、かつ堅牢なWebアプリケーションを作るための近道だ。
次にコードを書くとき、君がJSで `if (children.length === 1)` と打ちたくなったその瞬間、一度立ち止まって考えてみてほしい。その論理、実はCSSで解決できるのではないか、と。
コメント