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

やあ。CSSの世界へようこそ。
フロントエンドの深淵を覗き込み、日夜コードと格闘していると、時々「あれ、なんでこの指示通りに動いてくれないんだ？」と頭を抱えたくなる瞬間があるよね。大丈夫、その悩み、僕も数え切れないほど経験してきたから安心して。

今日はCSSの数ある技の中でも、ちょっとした「ひねくれ者」だけど、使いこなすと最高にスマートな`:last-of-type`という擬似クラスについて、お話ししようと思うんだ。

—

`:last-of-type` って何者？：お買い物リストで考えてみよう

まずは専門用語を一度忘れて、身近な例えから入ろうか。
君がスーパーで「買い物リスト」を手に持っていると想像してみて。リストにはこう書かれている。

• りんご（果物）
• にんじん（野菜）
• みかん（果物）
• たまねぎ（野菜）

ここで、「最後に出てくる『果物』だけ、特別なシールを貼りたいな」と思ったらどうする？ リストの上から順に見ていって、「果物」というグループの中で、一番最後に登場するやつを見つけ出すよね。

この「一番最後に出てくる、特定の種類のやつ」をCSSで指名するのが、`:last-of-type` の役割なんだ。

—

なぜ「last-child」じゃダメなの？

よくある間違いが `:last-child` との混同だね。

• `:last-child` は「親要素の中にある最後の子ども、そのもの」を選ぶ。
• `:last-of-type` は「親要素の中にある同じ種類のタグの中で、最後に来るもの」を選ぶ。

もしさっきの買い物リストの最後に「レジ袋（その他）」という項目が増えたらどうなるだろう？

• りんご（果物）
• にんじん（野菜）
• みかん（果物）
• たまねぎ（野菜）
• レジ袋（その他）

`:last-child` だと「レジ袋」が選ばれちゃう。でも、僕らが本当に選別したいのは「果物」という種類の中の最後である「みかん」だよね。ここで `:last-of-type` の出番というわけ。

—

実際にコードで見てみよう

さあ、エディタを開いて、こんなコードを試してみて。

/ pタグの中で、最後に登場するものだけに色を塗る /
p:last-of-type {
color: red;
font-weight: bold;
}

この場合、`p:last-of-type` は「パスタ」に適用されるんだ。たとえその後に `` タグがあろうが、`