【実務・中級編】 only-of-type擬似クラスの適用条件 – CSS実践ガイド

やあ。今日も今日とてCSSの沼にハマっているかい？
フロントエンドの現場で長く生き残っていると、「あれ、このセレクタ、頭の中では完璧に動くはずなのに、なんでブラウザはスタイリングしてくれないんだ……？」っていうデスマーチの1歩手前みたいな瞬間に何度も遭遇するよね。

今日は、そんなCSSの挙動のなかでも、中級者から「おっ」と声が出る質問をよく受けるテーマを取り上げよう。
`:only-of-type` 擬似クラスだ。

「親要素の中で、そのタグ型の要素が唯一である場合にマッチする」っていう、教科書通りの定義自体はみんな知っている。だけど、実際のコンポーネント開発や動的なCMSの出力結果にこれをブチ込んだ瞬間、なぜかスタイルが効かなくて頭を抱えるエンジニアが後を絶たない。

今日は、この `:only-of-type` がブラウザの内部でどう処理されているのかという「裏側の仕組み」から、実務で絶対にハマる罠、そして現場で即座に使える美しいコードパターンまで、シニアの視点からみっちり解説してあげる。コーヒーでも飲みながら聞いてくれ。

—

1. `:only-of-type` の標準仕様と、ブラウザの「裏側の脳内処理」

まずは基本のおさらいと、ブラウザがDOMツリーをどう解釈しているかの話からいこう。

`:only-of-type` は、「ある親要素（Parent）の子孫の中に、指定されたタグ型（Type）の要素が『1つしか存在しない』場合」にターゲットにヒットする。ここで非常に重要なポイントが2つある。

1. 「クラス名」ではなく「タグ名（要素の型）」で判定されること
2. 「親要素の直下（子）」ではなく、親要素の中にある「すべての同名タグ」がカウントされること

ブラウザはどうやって判定しているのか？

ブラウザがレンダリングツリーを構築するとき、セレクタを右から左へ（正確にはマッチングの最適化をしつつ）評価していく。
`:only-of-type` に遭遇したとき、ブラウザはこういう思考プロセスを辿る：

> 「ふむ、この要素の親を見てみよう。親の中には、この要素と同じタグ（例: `

` なら `

`）が、兄弟要素含めていくつ存在しているかな……？ おっ、数えてみたら『1個』だけだ。よし、マッチさせよう」

逆に、もし同じ親の中に同じタグが2つ以上あれば、それがどんなに離れた場所にあろうが、クラス名が違っていこうが、容赦なく不成立（アンマッチ）になる。これがこの擬似クラスの最大のクセであり、美しさでもある。

—

2. 現場でありがちな「大誤解」とトラップ

中級エンジニアのコードレビューをしていて一番多い勘違いがこれだ。

> 「`.card` というクラスを持つ要素の中で、唯一の存在だから `.card:only-of-type` でいけるっしょ！」

残念、それだと期待通りに動かないケースが多々ある。
なぜなら、`:only-of-type` は クラスセレクタではなく、暗黙的に（あるいは明示的に）タグ型をベースにしているから だ。

例えば、こういうHTML構造があったとしよう。

このとき、`.card:only-of-type` と書いたとする。どうなると思う？
親 `.container` から見ると、子要素のタグは `