孤高の存在を愛でる技術：`:only-child` を使いこなす

フロントエンドの現場で、「要素が1つしかない時だけ特別なレイアウトを適用したい」という要件に出くわしたことはないだろうか？

例えば、カードUIの中に要素が1つしかない時は中央寄せにしたい、あるいはリストの中に項目が1つだけなら余白を消したい――。そんな時、わざわざJavaScriptでDOMの長さを数えたり、サーバーサイドでクラス名を付与するような泥臭い実装に逃げていないだろうか。

CSSには、親要素の中に「たった一つしか存在しない子」を正確に射抜くための、美しくもストイックな疑似クラスが存在する。それが `:only-child` だ。今日はこの、地味だが非常に優秀なセレクタについて、実務の勘所を伝授しよう。

—

`:only-child` がブラウザの中で行っていること

まず、技術的な解像度を上げておこう。`:only-child` は「兄弟要素がゼロである」という条件と、「親要素の唯一の子である」という条件を同時に満たす要素にマッチする。

ブラウザのレンダリングエンジン側から見れば、これは `:first-child` と `:last-child` を同時に満たす要素を探すのと同義だ。内部的には、要素の `parentNode` を参照し、その子ノードリストの長さを確認するような処理に近い。

ここで注意してほしいのは、「テキストノード」は無視されるという点だ。HTMLの改行や空白がDOMツリー上でテキストノードとして扱われる場合でも、`:only-child` は「要素ノード（Element Node）」の数だけを見て判定する。だから、「改行が入っているからセレクタが効かない」なんてことは起きない。安心してくれ。

—

実践：カードUIにおける「単一要素の特例レイアウト」

よくある現場の課題として、「コンテンツのバリエーションによって要素数が増減するカード」を挙げてみよう。要素が1つの時は画面いっぱいに広げたいが、複数ある時はグリッドで並べたい。そんな時、`:only-child` は最強の武器になる。

.card-container {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/ 子要素が1つしかない場合だけ、グリッドを解除して全幅にする /
.card-item:only-child {
grid-column: 1 / -1; / グリッドの端から端まで占有 /
padding: 40px; / 唯一の要素なので、あえて余白を広めにとる /
background: #f9f9f9;
text-align: center;
}

この書き方の何が素晴らしいかというと、「状態の同期」をCSSに完全に委ねている点だ。JSで `classList.add(‘is-single’)` を制御する必要はない。DOMが変化すれば、CSSが勝手にその「孤高の存在」を検知して最適化してくれる。これが宣言的UIの醍醐味だ。

—

`:only-child` との「仲良し」を見つける：`:only-of-type`

少し似たセレクタで `:only-of-type` というのもある。これは「同じタグ名を持つ兄弟要素が他にいない場合」にマッチする。

例えば、`