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

こんにちは。CSSの世界へようこそ。
フロントエンドの荒波を越えてきた身として、今日はお話ししたいことがあります。

CSSを学び始めると、必ずと言っていいほど「あれ、効かないぞ？」という壁にぶつかるポイントがありますよね。その代表格が、今回お話しする `:first-of-type` です。

名前だけ見ると「最初のやつね、余裕！」と思いがちですが、これ、実は「ただの最初」ではなく「同じ種類のタグの中で、一番最初」という意味なんです。この微妙なニュアンスの差が、CSS初心者が夜も眠れなくなる原因だったりします。

大丈夫、一緒に紐解いていきましょう。

—

まずは、想像してみてください。
あなたは今、大きなおもちゃ箱を片付けようとしています。中には「赤いミニカー」と「青いミニカー」、それに「白い積み木」がごちゃ混ぜに入っています。

ここで、あなたに「一番最初にある『ミニカー』だけ、特別な箱に入れて！」という指令が飛んできたとします。

この時、あなたが手に取るべきはどれでしょう？
そう、最初に見つけた「赤いミニカー」ですね。青いミニカーは二番手なのでスルーです。積み木も「ミニカーではない」ので無視します。

これが `:first-of-type` の考え方です。
CSSで書くとこんな感じです。

/ 「ミニカー（divタグなど）」という種類のタグの中で、一番最初に出てきたやつだけ狙う /
div:first-of-type {
border: 2px solid red; / 特別な箱に入れる（赤枠をつける） /
}

—

一番よくある「つまずきポイント」は、「親要素の中に、別のタグが混ざっている時」です。

例えば、こんなHTMLがあるとしましょう。

はじめの挨拶（おまけのタグ）

見出し1

ここで「見出し（h2）の最初を赤くしたい！」と思って `h2:first-of-type` と書くと、どうなるでしょうか？

実は、ちゃんと「見出し1」が赤くなります。
なぜなら、`h2` というタグのグループだけを数えて、その中での一番最初を探しに行くからです。一番上に `

` があろうが、気にしません。

「あれ？さっきのミニカーの例だと、積み木（pタグ）は無視するって言わなかった？」と思いましたか？
鋭いですね！その通りです。`h2` というグループを見ている時は、`p` タグは「関係ない異物」として視界から消えるんです。

もし、あなたが「最初の子要素がh2じゃないとダメなんだ！」というルールを作りたいなら、`:first-child` を使います。でも、`:first-of-type` は「とにかくそのタグのタイプの中で、最初なら選ぶよ！」という、ちょっと大らかな性格なんです。

—

頭だけで考えるより、触ってみるのが一番です。エディタにコピペして、ブラウザで眺めてみてください。

私はpタグです（無視されるはず）

—

`:first-of-type` を使う時は、こう自分に問いかけてみてください。

「今、私は『タグの種類』で数えているかな？」

もし、「順番通りに並んでいるものを、純粋に最初から順に数えたい」なら `:first-child` を。
「タグの種類ごとにグループ分けして、それぞれの先頭を飾りたい」なら `:first-of-type` を。

この使い分けさえマスターすれば、もうレイアウトで泣くことはありません。CSSは、あなたの思い通りに動いてくれる最高の道具です。少しずつ、楽しみながら手に馴染ませていってくださいね。

何かうまくいかないことがあっても、それはあなたが一つ賢くなるための通過儀礼です。またいつでも質問してください。応援していますよ！