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

こんにちは。CSSの世界へようこそ。
フロントエンドの荒波を越えてきた身として、今日はお話ししたいことがあります。

CSSを学び始めると、誰もが一度は「あ、ここだけ余白を消したいのに！」という、ちょっとした苛立ちを感じる瞬間があるはずです。リストの最後やカードの並びで、余分な線や隙間が残ってしまうあの感じ。

そんなとき、魔法のように「一番最後の子だけ」を捕まえてくれる、頼れる相棒がいます。それが `:last-child` 疑似クラスです。

—

例えば、あなたがカフェで行列に並んでいると想像してみてください。
お店の人は、「並んでいる全員」にメニューを渡したいわけではなく、「最後尾の人」にだけ「ここからは案内終了です」という看板を渡したい。

CSSの `:last-child` は、まさにこの「最後尾の人」をピンポイントで見つけ出すための呪文です。

普段、私たちは `li` や `div` といったタグに色や形を指定しますが、それだと「全員」に同じスタイルが適用されてしまいます。でも、`:last-child` を使えば、「親というグループの中で、一番最後に生まれた子だけ」を特別扱いできるんです。

一番よくあるのは「区切り線」のお悩みです。リストの下に線を引くと、最後の要素の下にも線が出てしまい、デザインが締まらないことがありますよね。

そんなとき、`:last-child` を使うとこんなにスッキリ解決できます。

/ リストの各アイテムに下の線を引く /
li {
border-bottom: 1px solid #ccc;
padding: 10px;
}

/ でも、最後のアイテムだけは線を消したい！ /
li:last-child {
border-bottom: none; / ここで線を消す！ /
}

これだけで、デザインがグッとプロっぽくなります。「最後の一個だけ特別扱いする」という発想が、美しいUIを作る秘訣なんですよ。

—

初心者の頃、私も何度もハマったことがあります。「あれ、`:last-child` を書いたのになぜか線が消えない！」という経験です。

実はこれ、「最後が何なのか」をCSSがどう認識しているかが鍵なんです。

もし、`li` タグの下に、うっかり `

注釈

` なんてものを書いてしまったらどうなるでしょう？
CSSは「え、最後は `li` じゃなくて `p` じゃん！」と判断してしまい、`li:last-child` は「あ、僕の出番はないのね…」と沈黙してしまいます。

「親要素の中にいる、最後の子が本当にそのタグなのか？」
これだけ気をつけておけば、もう怖いものはありません。

—

では、練習として「カード型のメニュー」を想像してみましょう。最後だけ右側の余白をゼロにする、というテクニックです。

カード1

カード2

カード3

.card {
display: inline-block;
margin-right: 20px; / 全員に右の隙間を開ける /
padding: 20px;
background: #f0f0f0;
}

/ 最後のカードだけ、右の隙間をゼロにする /
.card:last-child {
margin-right: 0;
}

たったこれだけの記述で、最後のカードが右端にピタリと収まります。修正を入れるたびにクラス名を付け直すなんて面倒なことはしなくていい。これが `:last-child` の愛おしいところです。

—

最初は難しく感じるかもしれません。「疑似クラス」なんて名前、いかにも難しそうですよね。でも、今日紹介した `:last-child` は、あなたが書いたコードの「行儀」を良くしてくれる、とても親切な機能です。

もしうまくいかなくても、自分を責めないでください。「あ、今CSSと会話が噛み合わなかったな」くらいの気持ちで、HTMLの構造をもう一度眺めてみてください。

CSSは、あなたの思い描くデザインを形にするための、一番の理解者です。
`:last-child` を味方につけて、心地よいWebサイトづくりを楽しんでくださいね。応援しています！