【入門編】 :only-of-type 疑似クラス – CSS実践ガイド

やあ、CSSの世界へようこそ。フロントエンドの現場に長くいると、「これさえ知っていれば、わざわざクラス名を追加しなくて済んだのに！」という場面に何度も出くわします。

今日は、そんな「かゆいところに手が届く」ちょっと粋な存在、`:only-of-type` についてお話ししましょう。名前は少し難しそうですが、考え方はとてもシンプルで、人間味あふれるルールなんですよ。

—

:only-of-type って、どんな魔法？

想像してみてください。あなたは今、スーパーマーケットのレジに並んでいます。
「あ、このレジ、並んでいるのは私一人だけだ！」と気づいたとき、あなたは「唯一の客」ですよね。

`:only-of-type` は、CSS界の鋭い監視員です。親要素（レジの空間）の中に、「特定の種類のタグ（例えば `

` タグ）」がたった一つしか存在しないときにだけ、その子を見つけ出してスタイルを適用してくれます。

もしそのレジに他の `

` タグが一人でも並んでいたら？ 監視員は「おっと、今日は一人じゃないな」と判断して、何も反応しません。非常に控えめで、空気を読むのが上手な疑似クラスなんです。

—

なぜこれを使うの？

Webサイトを作っていると、「要素が一つしかない時だけ、特別なレイアウトにしたい」という場面によく出くわします。

• 「記事の本文が1段落しかないなら、文字を大きくして強調したい」
• 「画像が1枚しかないなら、枠線を消してスッキリ見せたい」

こんなとき、わざわざ `class=”only-paragraph”` なんて名前をHTMLに付けるのは少し面倒ですよね。CSSだけでスマートに解決できるのが、この `:only-of-type` の魅力です。

—

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

百聞は一見にしかず。まずはエディタを開いて、以下のコードを試してみてください。

/ 記事ボックスの中にある要素をチェックします /
.article-box p {
/ 通常の段落のスタイル /
color: #333;
}

/
もし、この p タグが親要素の中で「唯一の p タグ」だったら、
特別に青色にして、文字を大きくします！
/
.article-box p:only-of-type {
color: #007bff;
font-weight: bold;
font-size: 1.2rem;
}

どうですか？ ちゃんと一つだけある時だけスタイルが変わりましたよね。

—

つまずきやすいポイント：仲間はずれは気にしない

ここが少しだけ混乱しやすいところです。`:only-of-type` は、「同じ種類のタグ」だけをカウントします。

例えば、`