【入門編】 only-child疑似クラスの条件 – CSS実践ガイド

こんにちは！フロントエンドの現場を渡り歩いてきた、シニアアーキテクトの私です。

日々、CSSのコードレビューをしていると、レイアウトの微調整で悩んでいる初学者の方によく出会います。「あともうちょっとで理想の見た目になるのに、なぜか崩れちゃう…！」というあの歯痒い気持ち、私も昔はたっぷり味わってきたので痛いほどよく分かります。

今回は、そんなレイアウトの悩みをスマートに解決してくれる、ちょっとユニークなCSSの仲間`:only-child（オンリーチャイルド）疑似クラス`についてお話しします。

難しそうに聞こえる名前ですが、安心してください。身近な例えを交えながら、優しく紐解いていきますね。

—

1. `:only-child` ってどんな子？（身近な例えで理解しよう）

まずは、この難しそうな名前の正体を、身近なもので例えてみましょう。

想像してみてください。あなたは今、小さなお弁当箱を作っています。
このお弁当箱（＝親要素）の中には、おかずを入れる「仕切り（＝子要素）」があります。

• 子どもが2人以上いるとき： 唐揚げと卵焼きが入っていて、それぞれが隣り合っています。「ちょっとこっち寄ってよ」なんてスペースの調整が必要です。
• 子どもが「たった1人」だけのとき： おっきなハンバーグがドンッ！と真ん中にひとつだけ入っています。

この「お弁当箱の中に、たった1つだけおかずが入っている状態」を見つけて、「おっ、一人ぼっちだな！」とピンポイントで指し示してくれるのが、`:only-child` くんの仕事なんです。

CSSの世界で言い換えると、「ある親要素の中に、子要素が『1つだけ』ポツンと存在しているとき、その要素だけにスタイルを適用する」という条件付きの選択ルールになります。

—

2. なぜ `:only-child` が必要なの？（実務でのリアルな悩み）

Webサイトを作っていると、こんな場面に直面しませんか？

例えば、ニュース一覧のカードや、メニューのリスト項目などです。
普段は3つや4つの項目が綺麗に並んでいるので、CSSで「右側に余白（マージン）を空けよう」「区切り線を入れよう」と設定します。

しかし、更新の都合などで「今回は、中の項目が1個しかない！」というイレギュラーな事態が発生することがあります。

その結果どうなるか？
「3つ並ぶ前提」で書いたCSSがそのまま適用されてしまい、

• 1個しかないのに、右側に不自然な隙間が空いてしまう
• 本当はいらないはずの区切り線がニョキッと出てしまう

「うわっ、レイアウトが崩れた……！」と、慌てて修正した経験、ありませんか？

ここで、わざわざHTML側に特別なクラス名（`class=”single-item”` など）をつけなくても、「1つしかなかったら、こう動いてね」とCSSだけで賢く判断してくれるのが、`:only-child` の真骨頂なのです。

—

3. 実際のコードを見てみましょう

百聞は一見にしかず。簡単なカードのデザインを例に、具体的なコードを見ていきましょう。

以下のコードを、そのままあなたのエディタにコピーしてブラウザで開いてみてください。動きがバッチリ確認できますよ。

ブラウザでプレビューしてみると、2つある方はいつもの見た目なのに、1つだけの方は青い背景になり、文字が真ん中に寄っているのがわかりますよね。これが `:only-child` の魔法です。

—

4. つまずきやすいポイントと優しく解決するコツ

初心者のころ、私が `:only-child` を使ってよくハマった「落とし穴」をシェアしますね。もし同じところで悩んでも、「あ、チーフが言ってたやつだ！」と思い出して、深呼吸してください。

落とし穴：「あれ？ 効かないな？」と思ったら、隠れた住人を探せ

例えば、次のようなHTMLを書いたとします。

「`h2` は1個だけだから、`:only-child` でスタイルを変えよう！」と思って `.card h2:only-child` と書いても、うまくいかないことがあります。

よくある原因は、「HTMLのタグとタグの間にある、見えない改行やスペースも、ブラウザにとっては『テキストノード』という文字の子供としてカウントされちゃうことがある」……というのは少し古い仕様の話ですが、もっと多いのがこれです。

「親要素の中に、自分以外のタグがこっそり紛れ込んでいる」パターン。

もし「あれ、効かないな？」と思ったら、ブラウザの開発者ツール（F12キーや右クリック「検証」）を開いて、親要素の中に本当にその要素「1つだけ」しか存在していないかを、DOMツリーでよーく確認してみてください。
「あ、ここに空の `` があった！」なんてことが原因だったりします。

—

5. まとめ

いかがでしたか？ `:only-child` 疑似クラスのイメージ、少し掴んでいただけたでしょうか。

• `:only-child` とは： 親要素の中に、子要素が「唯一無二の1つだけ」いるときを選び出す条件。
• どんなときに使うの： 個数が変わるレイアウトで、1つだけのときのデザインを特別に変えたいとき（余白の調整や、特別な装飾など）。
• 困ったら： ブラウザの開発者ツールで、本当に「1人ぼっち」になっているかHTMLの構造を覗いてみよう。

Web制作の世界では、こうした「条件付きのスタイル」を使いこなせるようになると、CSSを書くのが何倍も楽しく、そしてスマートになります。

最初は完璧に使いこなせなくても大丈夫。まずは「こんな便利なセレクタがあるんだな」と頭の片隅に置いておいて、レイアウトで困ったときに「あ、あいつを呼んでみよう」と思い出してもらえたら、それだけで大成功です。

あなたの毎日のコーディングが、少しでも楽しく、ラクになりますように。
それでは、次の現場でお会いしましょう！