【入門編】 :first-of-type と :last-of-type 疑似クラス – CSS実践ガイド

CSSという世界へようこそ。フロントエンドの迷宮を歩くチーフアーキテクトとして、今日は皆さんが必ず一度は立ち止まる「最初の関門」、`:first-of-type` と `:last-of-type` について紐解いていきましょう。

「最初と最後を選ぶだけ」なんて簡単そうに聞こえますよね？ でも、いざ書いてみると「あれ、なぜか効かないぞ？」と首を傾げる経験、ありませんか？ 大丈夫、それは皆さんが「CSSのちょっと気難しい性格」に触れただけ。今日はその付き合い方を伝授します。

—

まるで「行列の先頭と最後尾」を指さす魔法

Webページを作っていると、リストの「一番上の余白を消したい」とか「最後の要素だけ線を消したい」というシーンに頻繁に出くわします。そんな時、一つひとつに `class=”first”` なんて名前をつけていたら、指がいくつあっても足りませんよね。

そんな面倒な仕事を、CSSの疑似クラスにお任せしましょう。

• :first-of-type：その種類のタグの中で「一番最初の子」を捕まえる
• :last-of-type：その種類のタグの中で「一番最後の子」を捕まえる

身近な例で言うと、「お寿司屋さんでカウンターに並んでいるお客さんの中で、一番最初に入ってきた人と、一番最後に帰る人を見つける」ようなものです。

なぜ「of-type」という名前なのか？

ここが一番のつまずきポイントです。実はこれ、単に「最初の子」を選ぶのではなく、「自分と同じタグ（種類）の中で最初か？」を見ているんです。

例えば、`div`の中に `h2` があって、その下に `p` が3つ並んでいるとします。`p:first-of-type` と書くと、最初の `p` タグが選ばれます。間に別の要素が混ざっていても、「`p` というグループの中の最初」を見つけてくれる……これが `of-type` の賢いところなのです。

—

さっそくコードで試してみましょう

以下のコードをそのままエディタにコピーして、ブラウザで見てみてください。どんなふうに色がつくか、実験です。

どうですか？ 意図した通りに動きましたか？

—

つまずきやすい「落とし穴」を回避するコツ

現場でよくある失敗は、「親要素の中に、違う種類のタグが混ざっているとき」に起きます。

例えば、`div` の中に `h1` が1つ、`p` が3つ入っていたとします。このとき `p:first-of-type` を指定すると、`h1` のことは無視して、純粋に「`p` の中での一番最初」を指し示します。

「あれ、一番上の `h1` に効いてほしいのに！」と焦るかもしれませんが、それは `first-child`（最初の子要素そのもの）という別の魔法が必要なサインです。

• `first-of-type` は：「種類ごとの一番最初」
• `first-child` は：「親から見てとにかく物理的な一番最初」

この2つを使い分けられるようになると、皆さんはもうCSSの初学者を卒業したも同然です。

—

最後に：完璧を目指さなくていい

最初は誰だって「思った通りにならない！」とイライラするものです。でも、CSSは「ここをこうしたい」という皆さんの意思を、ただ忠実に守ろうとしているだけなんですよ。

もし動かないときは、ブラウザの「検証ツール（デベロッパーツール）」を開いて、要素をポチッとクリックしてみてください。どのルールが適用されていて、どれが打ち消されているか、CSSはいつも答えを教えてくれます。

今日学んだ `:first-of-type` と `:last-of-type` を使えば、デザインの端々まで皆さんのこだわりを詰め込めます。ぜひ、怖がらずに色々なタグで試してみてくださいね。

あなたのWeb制作ライフが、より楽しく、より自由なものになりますように。応援しています！