こんにちは！フロントエンドの現場で日々CSSと格闘しているチーフアーキテクトです。

CSSを学び始めたばかりの頃、「あれもこれもやりたい！」と意気込んでコードを書いていると、どうしても「この要素、一つしかない時だけデザインを変えたいのに、全部に同じスタイルが当たっちゃう！」という壁にぶつかりませんか？

そんな時、CSSには魔法のようなセレクタが用意されています。それが今回紹介する `:only-child`（オンリーチャイルド） です。

名前からして「一人っ子」という感じがしますよね。まさにその通り。親要素の中に、「ポツンと一人だけ存在している時」にだけ、特定のスタイルを適用してくれる頼もしいやつなんです。

—

:only-child は「貸切状態」を見つける名人

イメージしてみてください。あなたは大きなホテルの広間（親要素）を管理する支配人です。

• お客さんがたくさん並んでいる時（子要素が複数ある時）は、みんな平等に接客します。
• でも、たった一人だけで貸切状態のお客さんが来たら、「せっかくだし、特別なおもてなしをしようかな？」と思いますよね。

`:only-child` は、まさにその「貸切状態」を瞬時に察知するセンサーのようなものなんです。

どんな時に役に立つの？

例えば、ニュースリストを作っているとします。

• お知らせが3つある時は、リスト形式で整然と並べたい。
• でも、お知らせが「1つだけ」しかない時は、リストの形にするよりも、ドーンと大きく目立たせたい。

こんな時、わざわざJavaScriptで個数を数えなくても、CSSだけで「一つだけなら特別仕様にする」という切り替えができるんです。

—

実際にコードを書いてみよう

まずは、このコードをエディタに貼り付けて、ブラウザで眺めてみてください。

/ 普段のリストのスタイル /
.item {
padding: 10px;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
}

/
ここが魔法のポイント！
もし「item」が親要素の中で唯一の子供なら、
背景をパッと明るい黄色に変えて、文字を大きくしちゃいます。
/
.item:only-child {
background-color: #fffacd; / レモンシフォン色 /
font-weight: bold;
font-size: 1.2rem;
border: 2px solid #ffd700; / ゴールドの枠線で強調 /
}

—

つまずきやすいポイント：ここだけ注意！

初心者の方がよく迷うのが、「親要素の中に、別のタグが混ざっている場合」です。

例えば、`