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

こんにちは！フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私ですが、今日はCSSを学び始めたばかりのあなたへ、そっと寄り添ってお話ししたいことがあります。

CSSのセレクタって、最初は魔法みたいで面白いですよね。「よし、このボタンを赤くしよう！」なんて意気込んで書いてみたはいいものの、「あれ？ なぜか隣の要素まで赤くなっちゃった…」「狙ったところだけ選べないよ！」なんて泥沼にハマった経験、ありませんか？ 大丈夫です、それ、世界中の誰もが通る道ですから安心してください。

今回は、そんなCSSの数あるセレクタの中でも、少しだけ名前がかっこよくて、最初に出会うと思わず「どういうこと！？」と首をかしげたくなる、`:last-of-type`疑似クラスの秘密を、一緒に優しく解きほぐしていきましょう。

—

1. `:last-of-type`って、いったいどんな子？

まず、この名前を日本語に直してみましょう。

• `last` ＝ 最後の
• `of-type` ＝ ～の型の（種類の）

つまり、「同じ種類の仲間たちの中で、一番最後にいる子」を指し示すセレクタです。

身近な例えで考えてみましょう。
あなたの机の上に、書類の山（親要素）があるとします。その中に、メモ用紙（divタグ）が数枚と、大事なお手紙（pタグ）が何枚か、バラバラと重なっています。

ここで、「お手紙（pタグ）の中で、一番一番下（最後）にあるものだけに、ピンクの付箋を貼りたいな」と思ったとします。
そんなときにお呼び出しするのが、この `:last-of-type` なんです。

「お父さん（親要素）の中にいる、色んな兄弟（違うタグ）の中から、私と同じ種類の兄弟だけを数えて、一番最後の子を教えて！」と、CSSにお願いするイメージですね。

—

2. 百聞は一見に如かず！実際のコードを見てみよう

言葉だけだと少しフワッとしてしまうので、実際のHTMLとCSSで見てみましょう。
よくある「ニュースやお知らせのリスト」をイメージしてください。

この中に、3つの `p` タグ（お知らせの文章）と、1つの `span` タグ（日付）が仲良く暮らしています。

ここで、「一番最後に出てくる `p` タグだけに、下線を引いてスマートに仕上げたい！」 と思ったとします。そんなときのCSSがこちらです。

/ 「.news-box」の中にいる「p」タグたちのうち、一番最後の子を狙い撃ち！ /
.news-box p:last-of-type {
border-bottom: 2px solid #ff6b6b; / 赤っぽいお洒落な下線を引くよ /
font-weight: bold; / ついでにちょっと太字にするよ /
}

このコードがどう動くか、頭の中で想像できますか？
正解は、3つある `p` タグのうち、「週末はピクニックに行きましょう！」の行だけに下線が引かれます。

その下にある `span` タグ（日付）は、種類が違う（`p` ではなく `span`）ため、カウントの対象外になります。だから、「あれ？日付の下線になっちゃった！」なんて失敗が起きないんです。これってすごく優しくないですか？

—

3. ここでよくある「うっかりミス」とその対策

さて、ここからが現場のエンジニアが思わず「あるある！」と膝を打つポイントです。初学者の人が一番つまずきやすい落とし穴をシェアしますね。

よく似たお友達に、`:last-child` というセレクタがいます。「名前が似てるから、どっち使っても一緒でしょ？」と思っちゃいませんか？
ここが大きな分かれ道なんです！

先ほどのHTMLをもう一度見てみましょう。

もしここで、`:last-child` を使ってしまったらどうなるでしょうか？

• `:last-child` は、「親要素の中にいる、本当に一番最後の子ども」を意味します。
• このHTMLで一番最後の子どもは、`p` タグではなく、一番下にいる `span` タグ ですよね。

つまり、`p:last-child` と書いてしまうと、「おや？ 最後の子は `span` タグだから、条件に合わないや」と判断され、どこにもスタイルが適用されないという悲しい現象が起きてしまいます。これが、初心者の頃に誰もが一度はハマる「CSSが効かないよ〜」の正体です。

どう使い分ければいいの？

• 「タグの種類なんて関係なく、とにかく親の最後尾にいる子を捕まえたい！」ときは、`:last-child`
• 「色んなタグが混ざってるけど、特定のタグ（pとかliとか）の中で最後の子を捕まえたい！」ときは、今回主役の `:last-of-type`

このように使い分けてあげると、CSSはあなたの思い通りに動いてくれるようになりますよ。

—

4. 実務でよく使うシチュエーション

現場でこの `:last-of-type` が一番輝く瞬間は、ズバリ「リストの下線やボーダーの調整」です。

例えば、リスト（`ul` と `li`）を縦に並べたとき、すべての項目に下線を引くと、一番下の項目の下にも線が出てしまって、なんだかデザインが野暮ったく見えませんか？

そんなとき、こんな風に書くのがプロのテクニックです。

ul.item-list li {
padding: 12px 0;
border-bottom: 1px solid #ddd; / 基本はすべての項目に下線を引く /
}

/ でも、最後のliだけは下線を消してスッキリさせたい！ /
ul.item-list li:last-of-type {
border-bottom: none;
}

これだけで、HTML側をいじらなくても、CSSだけで一番下だけ綺麗に線を消すことができます。こういう細かい気配りが、Webサイトのクオリティをぐっと引き上げてくれるんです。

—

最後に：CSSはあなたの味方です

いかがでしたでしょうか？ `:last-of-type` の仕様、少しだけ身近に感じられたでしょうか。

最初は難しく見える記号や英語の羅列も、ひとつひとつの「意味」や「お仕事」を知っていくと、まるで頼もしい相棒のように思えてきます。もしコードが思い通りに動かなくても、それはCSSが間違っているのではなく、あなたがまだお互いの会話の仕方を少し知らないだけ。焦る必要は全くありません。

ひとつずつ、自分の手で書いて、ブラウザで動かして、「お、動いた！」という小さな感動を積み重ねていってくださいね。あなたのコーディングライフが、もっと楽しく、ワクワクするものになりますように。チーフアーキテクトの私から、心から応援しています！