【実務・中級編】 last-child疑似クラスの活用 – CSS実践ガイド

やあ、お疲れ。最近、君が書いたCSSのレビューをしていて、ふと気になったところがあったんだ。リストやカードのレイアウトで、最後の要素だけボーダーやマージンを消すために、わざわざ `.item:last-of-type` とか、果ては JavaScript でわざわざクラスを付与する処理を書いていたりしないかい？

気持ちはすごくよくわかる。「最後の要素だけ、なんかこう…デザインの収まりが悪いから調整したい」っていう現場の要求は毎日のようにあるからね。でも、CSSには古くから、そして現代の複雑なコンポーネント指向のマークアップにおいても非常に頼りになる相棒がいる。それが `:last-child` 疑似クラス だ。

今回は、この `:last-child` の仕様の裏側から、現場で即座に使える実践的なパターン、そして「あれ、効かないぞ？」とハマりがちな罠まで、シニアの視点で徹底的に解説しよう。明日からのコーディングが少しスマートになるはずだ。

—

1. `:last-child` の基本仕様と「ブラウザの裏側の世界」

まずは基本のおさらいだ。スペックシートをただ読むだけじゃなくて、ブラウザがレンダリングの裏側でどう動いているかをイメージしながら聞いてほしい。

`:last-child` は、文字通り「親要素における最後の子要素」をターゲットにする疑似クラスだ。

/ 親要素の中の「最後の子」が対象 /
.parent-element > :last-child {
/ ここにスタイルを書く /
}

ここで中級者の君なら「おっ？」と思うかもしれない。そう、このセレクタの挙動で最も重要なポイントは、「要素の種類（タグ名やクラス名）関係なく、DOMツリー上の順番を見る」という点だ。

ブラウザのパーシングとCSSセレクタのマッチング

ブラウザはHTMLを上からパースしてDOMツリーを構築し、その後スタイルシートを適用していく。このとき、CSSセレクタの評価は基本的に右から左（Right-to-Left）へ向かって行われる。

`:last-child` に直面したブラウザは、次のような判定を瞬時に行う。
1. 「今、評価している要素の親は誰だ？」
2. 「その親が持つ子要素のリストの中で、この要素は一番ケツ（最後尾）にいるか？」

ここで重要なのは、「タグの種類は問われない」ということだ。例えば、以下のようなマークアップがあったとする。

この状態で `.list p:last-child` と書いた場合、スタイルは一切適用されない。なぜなら、`.list` の最後の子要素（`last-child`）は `

` タグではなく `` タグだからだ。「最後のpタグ」ではなく、あくまで「最後の子」なのだ。ここを勘違いして「あれ、 `:last-child` が効かない！」と頭を抱えるジュニア層が後を絶たない。気をつけてくれよ。

—

2. 現場で使える！実践パターン3選

理論が分かったところで、現場のプロジェクトで今すぐ使える具体的なユースケースを見ていこう。コピペして、自分のプロジェクトのCSS設計に組み込んでみてほしい。

パターンA：リストの「最後のボーダー消し」の美学

リストを縦に並べるとき、各アイテムに下線（`border-bottom`）を引くのは定石だ。しかし、最後のアイテムにまで下線が残っていると、デザイン的にはちょっとダサい。昔はわざわざ `.item:not(:last-child)` と書いたり、HTML側に `class=”last”` を付与していた。

今どきは、こう書くのがスマートだ。

• プロフィール設定
• 通知の管理
• プライバシーポリシー

.clean-list {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid #e2e8f0; / リスト全体の最上部 /
}

.clean-list__item {
padding: 16px 0;
/ 各アイテムの下部にボーダーを引く /
border-bottom: 1px solid #e2e8f0;
}

/ 最後の要素だけボーダーを消してレイアウトの美しさを保つ /
.clean-list__item:last-child {
border-bottom: none;
}

これで、リストが動的に増減しても、CSS側が自動的に「最後の砦」を綺麗に整えてくれる。メンテナンスフリーの完成だ。

パターンB：グリッド/フレックスレイアウトにおける「マージンの相殺・打ち消し」

カード型のUIをCSS GridやFlexboxで並べるとき、要素間の隙間（`gap`）が使えない古いブラウザ環境や、意図的にマージンで制御したいレガシーな案件に遭遇することはないかい？（いや、現代なら `gap` を使おう、と言いたいところだが、メールテンプレートや特定の制約がある環境ではまだマージン芸が必要になることもある）。

最後の要素に設定された不要なマージンをリセットするのにも `:last-child` は大活躍する。

.card-container {
display: flex;
flex-direction: column;
}

.card-container .card {
margin-bottom: 24px; / カード同士の縦の隙間 /
}

/ 最後のカードの下方向のマージンをゼロにして、親コンテナとの余白を正確に保つ /
.card-container .card:last-child {
margin-bottom: 0;
}

これによって、親コンテナの下部パディングとカードのマージンが二重に足されてデザインが崩れる、というよくある事故を防ぐことができる。

パターンC：インラインリストの区切り文字（スラッシュやドット）の制御

パンくずリストや、タグの並びなどで、「最後の要素以外に区切り文字を入れたい」という要件もよくある。これは `:last-child` の否定形である `:not(:last-child)` と組み合わせることで、非常にエレガントに解決できる。

.breadcrumbs a {
text-decoration: none;
color: #3b82f6;
}

/ 最後の要素「以外」の右側にスラッシュを表示する /
.breadcrumbs a:not(:last-child)::after {
content: “/”;
margin: 0 8px;
color: #94a3b8;
}

CSSの疑似要素と `:not(:last-child)` を組み合わせることで、HTML側に余計な記号をベタ書きせずに済む。マークアップのセマンティクスを汚さず、プレゼンテーション層だけで完結させる、まさにプロの技だね。

—

3. シニアが教える「ハマりどころ」とベストプラクティス

最後に、現場で実際に私がコードレビューをしていて「あー、そこ引っかかっちゃったか」と指摘することが多いポイントをいくつか共有しておこう。

罠1：ラッパー要素（Wrapper）の存在を忘れるな

コンポーネントの設計が変わって、HTML構造が一段深くネストすることがよくある。

この時、`.card:last-child` と書いても、期待通りに動かなくなる。なぜなら、`.card` から見た親は `.card-wrapper` であり、すべての `.card-wrapper` の中には `.card` が1つしか存在しないため、すべての `.card` が「最後の子」になってしまうからだ。

対策:
DOM構造が変更されたら、セレクタの適用先も必ず見直すこと。この場合は `.card-wrapper:last-child .card` のように、親側の最後の子をターゲットにするか、CSS Gridの `row-gap` / `column-gap` のようなモダンなレイアウト手法へ移行するリファクタリングを検討すべきだ。

罠2：`:last-of-type` との混同

先ほど少し触れたが、兄弟要素の中に異なるタグが混ざる可能性があるなら `:last-child` ではなく `:last-of-type` を使うべきか、要件をよく見極めよう。

• `:last-child`: 親の中の「あらゆる子要素」の最期
• `:last-of-type`: 親の中の「同じタグ名を持つ要素たち」の最後

「リストの中に、たまに広告バナー（`