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

こんにちは。Webの世界へようこそ。
CSSを触り始めたばかりの頃、誰もが一度は「あれ、なんで効かないの？」と頭を抱えるポイントがあります。その代表格が、今回紹介する `:last-child` です。

「最後の子を選択する」という名前の通り、直感的に使えるはずなのに、いざ書いてみると「お前、そこじゃないよ！」とツッコミを入れたくなる挙動をすることがあります。今日は、なぜそんなことが起きるのか、どうすれば仲良く付き合えるのかを、現場の視点から紐解いていきましょう。

—

まず、`:last-child` を「お買い物袋の中の最後の商品」と想像してみてください。

あなたはスーパーで、お菓子、飲み物、そして最後に買った「パン」を袋に詰めました。このとき、`:last-child` は「この袋の中で、最後に詰められたもの」を指します。

CSSで書くとこうなります。

/ 袋（親要素）の中の、一番最後に詰められた要素が対象 /
.shopping-bag p:last-child {
border-bottom: none; / 最後の要素だけ下線を消したい時などによく使います /
}

このルールはとてもシンプルです。「親要素の中にいる子たちのうち、一番最後に座っているやつだけ特別扱いする」というものですね。

—

さて、ここからが少しだけ気をつけたいポイントです。実は `:last-child` は、「指定した要素が、親の中で一番最後であること」を厳しくチェックします。

例えば、こんなHTMLがあったとします。

ここで「最後の `

` タグにだけスタイルを当てたい！」と思って `.menu p:last-child` と書いても、残念ながら何も起きません。

なぜでしょう？

それは、`.menu` という袋の中を覗いたとき、一番最後に座っているのは `

` ではなく `` だからです。CSSは「お前、本当に最後か？他に誰か後ろにいないか？」と厳しく確認し、「あ、後ろに `` がいるから、お前は最後じゃないな」と判断してしまうのです。

この「実は後ろに別の要素が隠れている」というパターンは、実務でも本当によくあります。「最後の子」と言いつつ、実はその後ろにコメントアウトされたコードや、空の `

` が紛れ込んでいて動かない……なんてことは日常茶飯事です。

もし「どうしても最後だけ指定したい！」というときは、`:last-child` ではなく、`:last-of-type` を使ってみてください。これは「その種類（タグ）の中で最後」という意味なので、後ろに別の要素があっても空気を読んで動いてくれます。

—

`:last-child` が一番輝くのは、やっぱりリストの「区切り線」を消す時です。

.list li {
border-bottom: 1px solid #ccc; / 基本は全部に線を入れる /
}

/ 最後の要素だけ線をとる /
.list li:last-child {
border-bottom: none;
}

こう書くと、リストが何個増えても、一番最後の要素だけ綺麗に線が消えてくれます。これぞCSSの醍醐味ですよね。いちいち最後の要素に `class=”last”` なんて名前を付けなくても、CSSが自動で状況を判断してくれる。この「自動化」の感覚が掴めると、コーディングがグッと楽しくなりますよ。

—

もし、あなたが書いたコードで `:last-child` が動かなくても、自分を責めないでくださいね。「DOM構造（HTMLの入れ子）が、自分の思っている順番と少し違うのかな？」と一度立ち止まって、ブラウザの「検証ツール（デベロッパーツール）」で要素を覗いてみてください。

「ああ、なるほど！君が最後にいたのか！」と気づいた瞬間、それはもう立派なエンジニアの視点です。

CSSは、一度仲良くなればこれほど頼もしい相棒はいません。焦らず、少しずつ、その挙動の裏側にある「CSSの論理」を楽しんでみてくださいね。応援しています！