【入門編】 first-of-type疑似クラスの仕様 – CSS実践ガイド

こんにちは！フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私ですが、今日はCSSを学び始めたばかりのあなたに向けて、ちょっとした「CSSの魔法」をお話ししようと思います。

CSSを書いていると、「あー、親御さん（親要素）の中にいる兄弟たちのうち、一番最初の子だけに特別なスタイルを当てたいのに、なぜかうまくいかない！」という壁にぶつかること、ありませんか？

「一番最初」といえば、みんな大好き `:first-child` が思い浮かぶはずです。でも、こいつがなかなかの曲者で、現場でも初心者のうちはよく返り討ちに遭うんです。

そこで登場するのが、今回主役としてスポットライトを当てる `:first-of-type` 疑似クラス です。
「名前が長くて難しそう…」なんて身構えなくて大丈夫ですよ。今日は、身近な例えを交えながら、そっと優しくその正体を解き明かしていきますね。

—

1. まずは「最初の壁」：`:first-child` でハマる罠

`:first-of-type` のすごさを知るために、まずはそのライバルである `:first-child` のお話からさせてください。

例えば、お気に入りのカフェのメニュー表をHTMLで作っているとします。

ここで、「このメニューボックスの中にある、『最初の子要素』の文字を赤くしたい！」と思ったとします。直感的にこう書きたくなりますよね。

/ 「最初の子」を赤くしたい！ /
.menu-box :first-child {
color: red;
}

さて、ブラウザで見てみるとどうなるでしょう？
……見事に「本日のオススメ」という見出し（`

`）が赤くなります。狙い通り！……に見えますよね。 でも、もしデザイナーから「あ、ごめん、やっぱり一番最初の『文章（pタグ）』だけ赤くして！」と言われたらどうでしょう？慌ててCSSをこう書き換えてみます。 / 「最初のpタグ」を赤くしたいつもり / .menu-box p:first-child { color: red; } あれ？保存してブラウザをリロードしても、どこも赤くなりません。 「えっ、なんで？間違ってないよね？」と、ここで初心者の多くが冷や汗をかくポイントです。 なぜ動かないのか？

`:first-child` の心の中はこうなっています。
「私が見るのは、あくまで『家族（兄弟）の中で、物理的に一番最初に生まれた子』だけだよ！」

先のHTMLを見ると、`.menu-box` の中で一番最初に生まれたのは `

` タグです。 CSSは「pタグであって、かつ最初の子であるやつ」を探したのですが、最初の子は `h2` だったので、「条件エンカウント失敗！」となり、どの要素にもスタイルが当たらなかったというわけなんです。冷酷ですね（笑）。 — 2. 救世主登場！`:first-of-type` の優しい世界

ここで登場するのが、今回の主役である `:first-of-type` です。

日本語に直訳すると、「同じタイプ（種類）の中で、最初のエントリー」という意味になります。
先ほどのカフェの例で使ってみましょう。

/ 「pタグという種類の中で、最初に登場するやつ」を赤くする /
.menu-box p:first-of-type {
color: red;
}

これを書くと、ブラウザはこう考えます。
1. 「お、`.menu-box` の中を見てみよう」
2. 「今回は『pタグ』の仲間たちを探せばいいんだな」
3. 「あれこれ子供たちを見るけど……おっ、これが最初に現れたpタグだな！」
4. 「よし、君を赤くしよう！」

結果、2番目に書かれている `

淹れたてのブレンドコーヒーです。

` が見事に赤くなります！
`

` が最初にいようが関係ありません。「pタグのグループの中で一番最初」をピンポイントで見つけ出してくれるんです。これが `:first-of-type` の真骨頂であり、最高に優しいところです。 — 3. 実務でよくあるシチュエーションで使ってみよう

では、もう少し実務に近い形でもう一つ例を見てみましょう。
よくある「記事一覧リスト」や「カード型のレイアウト」を想像してください。

「カードの中にある最初の段落（pタグ）だけに、少し大きめの文字サイズを適用したい！」というデザイン指示があったとします。

そんなときは、迷わず `:first-of-type` の出番です。

/ カード内の最初の段落だけに、ちょっとリッチなスタイルを当てる /
.article-card p:first-of-type {
font-size: 1.2rem;
font-weight: bold;
color: #2b6cb0; / 爽やかな青色 /
}

実際のコード（コピペして試せます！）

以下のコードを、あなたのメモ帳やCodePenなどのエディタにそのまま貼り付けて、ブラウザで確認してみてください。動きがバッチリ体感できますよ。

—

4. チーフアーキテクトからのちょっとしたアドバイス

ここまで読んで、「なんだ、`:first-of-type` ってすごく便利じゃん！」と思っていただけたなら嬉しいです。

最後に、現場で後輩によく伝える「ちょっとした注意点」をひとつだけ。
`:first-of-type` は、「親要素の中にある、指定したタグのグループごとの最初」を指します。
つまり、`