【実務・中級編】 only-child擬似クラスの適用条件 – CSS実践ガイド

`:only-child` の深淵：なぜ「ただ一つの子」という条件が、現場で最強の武器になるのか

フロントエンドの現場でCSSを書いていると、どうしても「要素が1つしかない時だけ特別なスタイルを当てたい」というシチュエーションに出くわす。リストのアイテムが1つなら装飾を消したい、あるいはカード内の画像が唯一の要素なら枠線を広げたい……。

そんな時、初心者はついJavaScriptでDOMの長さを数えてクラスを付与しようとするが、それは少し待ってほしい。CSSには、そのための洗練された武器 `:only-child` が用意されている。今日は、この一見シンプルでいて、実は奥が深い擬似クラスの正体と、現場で「なるほど！」と言わせる使いこなし術について話そう。

—

`:only-child` の仕様とブラウザの裏側

まず定義をはっきりさせておこう。`:only-child` は、「その親要素にとって、兄弟要素が存在しない唯一の子である」場合にのみマッチする。

ここで重要なのは、「テキストノード」や「コメント」は無視されるという点だ。ブラウザがこの擬似クラスを評価する時、DOMツリー上の「要素ノード（Element Node）」の数だけを数えている。つまり、ソースコード上で要素の間に改行やスペースがどれだけ入っていようと、HTMLタグとして定義された要素が1つしかなければ、ブラウザは「よし、お前が唯一の存在だな」と判定を下す。

この処理は非常に高速だ。なぜなら、ブラウザのレンダリングエンジンは、スタイル計算のフェーズで親要素から子要素への参照をすでに持っているからだ。JSでDOMを操作するようなコストは一切かからない。パフォーマンスを気にするなら、迷わずこちらを選ぶべきだ。

—

実務で輝く「唯一の存在」の活用例

例えば、ダッシュボードのウィジェットや、CMSから流し込まれるコンテンツエリアを想像してほしい。中身が1つなのか複数なのか分からない時、レイアウトを崩さないためのガードレールとして `:only-child` は非常に優秀だ。

/ カード内の要素が1つだけの場合の特別なレイアウト /
.card-content > :only-child {
/ 唯一の要素なら余白を削ってダイナミックに配置する /
margin: 0;
padding: 1.5rem;
border-radius: inherit;
}

/ もし兄弟がいれば、通常通りの余白を適用（あえての否定形ではないアプローチ） /
.card-content > + {
margin-top: 1rem;
}

このコードの賢いところは、`:only-child` を使うことで「余計な条件分岐」をCSS内部で完結させている点だ。後から要素が増えた場合でも、スタイルは自然に通常モードへ遷移する。これが宣言的UIの醍醐味だ。

—

よくある落とし穴：`:only-of-type` との違い

中級者でも混同しやすいのが `:only-of-type` だ。これの区別は明確にしておこう。

• :only-child: 親の中にある「すべての要素の中で」唯一の存在か。
• :only-of-type: 親の中にある「そのタグの種類の中で」唯一の存在か。

例えば、`