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

こんにちは！フロントエンドの現場を長年駆け抜けてきたチーフアーキテクトの私です。

CSSを書き始めたばかりの頃って、セレクタの海に溺れそうになりますよね。「あっちを赤くしたいのに、こっちまで赤くなっちゃった……」なんて、誰もが通る懐かしい道です。

今回は、そんなCSSの数あるセレクタの中でも、ちょっと名前がカッコよくて、いかにもプロっぽさの漂う「`:only-of-type（オンリー・オブ・タイプ）」という疑似クラスを取り上げます。

「名前からして難しそう……」なんて身構えなくて大丈夫ですよ！
実はこれ、私たちの日常生活の中にある「あるルール」と全く同じなんです。一緒に優しく紐解いていきましょう。

—

1. `:only-of-type` って、一体どんな子？

まずは、この難しそうな名前を日本語に翻訳してみましょう。

• only ＝ 唯一の、ただひとつの
• of-type ＝ 〜の種類の

つまり、「親御さん（親要素）の中で、その種類のタグが『ただひとつだけ』存在しているとき」にだけ、こっそりお返事をしてスタイルを適用してくれる、ちょっと気まぐれで健気なヤツなんです。

身近な例え話：クラスに「眼鏡っ子」が1人だけいたら？

想像してみてください。
とある学校のクラス（親要素）があります。そこに色々な生徒（子要素）がいます。

男子も女子もたくさんいますが、「赤い眼鏡をかけた生徒（特定のタグ）」が、そのクラスの中に「たった1人しかいない」とします。

このとき、先生がこう言いました。
「クラスの中で、眼鏡をかけている人が1人しかいないなら、その人にだけ特別な席をあげよう」

これがまさに `:only-of-type` の世界です！
もしクラスに眼鏡っ子が2人以上いたら、この特別ルールは発動しません。「他にもいるからダメね」とスルーされてしまいます。

—

2. 実際のコードで動きを見てみよう

百聞は一見に如かず。実際にコードを見てみましょう。
今回は、よくある「カード型のボックス（記事やプロフィール）」の中に、テキストや画像が入っているシチュエーションを想像してください。

サンプルHTML

CSSの書き方

さて、ここで「段落（`

`タグ）が、そのカードの中にぽつんと1つだけあるときだけ、文字の色をちょっと目立たせる（青色にする）」という魔法をかけてみましょう。

/ カードの中にある

タグをターゲットにする /
.card p:only-of-type {
color: #0066cc; / 爽やかな青色にするよ /
font-weight: bold; / ついでに太字にしよう /
}

どんな結果になる？

• パターンAのカード：

中にある `

` タグは1つだけなので、条件クリア！ 文字が青色の太字になります。

• パターンBのカード：

中にある `

` タグが「2つ」あります。「ただひとつだけ」というルールから外れてしまうため、このCSSは適用されず、普通の黒い文字のままになります。

「あ、これだけなんだ！」って思いませんでしたか？
そうなんです。仕組み自体はとってもシンプルなんですよ。

—

3. ここでよくある「うっかりミス」と優しい解説

現場で後輩から「センパイ、`:only-of-type` が効かないんです……」と泣きつかれることがよくあります。大体原因は決まっています。初心者のあなたが同じ罠にハマらないよう、こっそり教えちゃいますね。

罠その1：親要素の「種類」を見てることを見落とす

`:only-of-type` は、「同じ種類のタグの中でいくつあるか」を数えます。

例えば、こんなHTMLがあったとします。

ここで `.box p:only-of-type` と書いたとします。
「`

`タグは、`

`や``と混ざってるけど、` `自体は1個だけだから効くはず！」 ……大正解です！これならちゃんと効きます。` `や``は別の種類（別種族）なので、` `の数を数えるときにはカウントされないからです。 逆に、同じ ` ` が2つあったら、もちろん動きません。 「種類（type）ごとにカウントする」という名前の由来を思い出してあげてくださいね。 罠その2：別のタグに包まれているとき

この場合、`

`タグの親御さんは `.box` ではなく、直上の `