CSSの世界へようこそ！フロントエンドの最前線でコードを書いていると、たまに「なんで思う通りに色がついてくれないんだ！」と頭を抱えたくなる夜もありますよね。でも大丈夫、CSSは一度コツを掴めば、まるで魔法のように意のままに操れる相棒になります。

今日は、そんなCSSの数あるセレクタの中でも、少しだけクセがあって、でも使いこなすとめちゃくちゃ頼りになる`:only-of-type`という擬似クラスについて、一緒に紐解いていきましょう。

—

名前からなんとなく想像できるかもしれませんが、これは「その親の中で、この種類のタグは君だけだね」という条件でスタイルを適用する魔法の呪文です。

日常の風景で例えてみましょう。
あなたは今、カフェのカウンター席にいます。そのカウンターには「コーヒーカップ」が一つだけ置かれています。もし「コーヒーカップが一つしかない席にだけ、コースターを敷こう」というルールがあったら、その席は条件を満たしますよね？

でも、もしそこに「コーヒーカップ」が2つ並んでいたら？「唯一」ではないので、そのルールは適用されません。これが `:only-of-type` の考え方です。

ここが一番のつまずきポイントです。`:only-of-type` は、他のタグが混ざっていても気にしません。あくまで「そのタグと同じ種類の仲間が、他にいないか？」だけを見ているんです。

—

例えば、ブログの投稿記事で「画像が1枚しかないときは、少し大きく表示したい」というシチュエーションを想像してください。

こんにちは！今日はいい天気ですね。

唯一の画像

思い出の写真です。

これに対して、CSSをこう書きます。

/ articleの中にあるimgが、その中で唯一のimgである場合 /
article img:only-of-type {
width: 100%; / 横幅をいっぱいに広げる /
border: 5px solid gold; / 唯一の存在感を示すゴールドの枠線 /
}

パターンAの中には `` タグが1つしかありませんよね。だからCSSは「お、君はここで唯一の存在だね！」と判断してスタイルを適用します。
一方でパターンBは、`` が2つあります。CSSは「君たちは仲間がいるよね？じゃあ今回はお休み」と判断するわけです。

—

ここが初学者が一番混乱するところですが、とても大事な話なので聞いてください。
「その親の中に、他のタグ（pタグやh1タグなど）が混ざっていても、全く問題ありません！」

タイトル

唯一の段落です

おまけの文字

この場合、`p` タグは `div` の中で唯一の `p` タグなので、`:only-of-type` がバッチリ反応します。`h1` や `span` が隣に座っていても、「僕と同じ種類の人間（タグ）はいないからOK！」と判断されるのです。

—

実務でこの子を使うときは、「コンテンツがどう増えるか分からないとき」に仕込んでおくと、デザインが崩れなくて非常に重宝します。

例えば、「画像が1枚なら大きく、2枚以上なら横並びにする」といったレイアウトを組むとき、あえてJSで制御しなくてもCSSだけで「唯一の時だけ特別なデザイン」を適用できるのは、コードがスッキリしてメンテナンスもしやすくなります。

もし、思ったようにスタイルが当たらないときは、一度HTMLを見直してみてください。
「あれ？見えないところに同じタグがもう一つ紛れ込んでいないかな？」と。

CSSは、論理的に書けば必ず応えてくれます。
`:only-of-type` は、あなたのデザインに「特別感」を演出するための素敵なツールです。ぜひ、怖がらずに色々な場所で試してみてくださいね。

また何か分からないことがあれば、いつでも聞きに来てください。一緒に最高のアウトプットを目指しましょう！

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