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

CSSの世界へようこそ。フロントエンドの迷宮を歩き続けてきた私から、今日ひとつ、とても素敵な魔法をお教えしますね。

Webサイトを作っていると、こんな場面に出くわしたことはありませんか？
「リストの最初と最後だけ、ちょっと見た目を変えたいな。でも、ひとつひとつクラス名を付けるのは面倒だし、修正が入るたびに書き換えるのも大変……」

そんなとき、CSSには「最初の子」と「最後の子」を自動で見つけてくれる頼れる相棒がいるんです。それが `:first-child` と `:last-child` です。

—

まずは簡単な例え話をしましょう。
あなたが人気カフェの行列に並んでいるとします。

CSSの `:first-child` と `:last-child` は、ブラウザに対して「この親要素の中で、一番最初（または最後）にいる子要素を捕まえて！」と命令する合図のようなものです。

これを使えば、「リストの先頭にだけ線を引く」「最後だけ余白を消す」なんて作業が、魔法のように一瞬で終わります。

—

たとえば、メニューリストを作っているとします。リストの上下に境界線（ボーダー）を引きたいけれど、全部の要素に線を引くと線が重なって太くなってしまいますよね。そんなとき、この疑似クラスが輝きます。

.menu-list li {
/ まず、すべてのリストに上下の線を引いてみます /
border-bottom: 1px solid #ccc;
padding: 10px;
}

/ 最後の要素だけ、下の線を消してスッキリさせたい！ /
.menu-list li:last-child {
border-bottom: none; / 最後の「カフェラテ」の下の線だけ消す /
}

どうでしょう？ `

` 自体に `class=”last”` と書かなくても、ブラウザが勝手に「おっ、これが最後だな」と判断してスタイルを適用してくれるんです。これがCSSの「アーキテクチャ（構造）」を綺麗に保つコツなんですよ。

—

ここで少しだけ、現場でよくある失敗談を共有させてください。初心者の頃、誰もが一度は「あれ？効かないぞ？」と悩むポイントがあります。

`:first-child` は、「親要素の中の、一番最初にある要素」に反応します。
もし、`

この場合、`li:first-child` と書いても、「一番最初の『子』は `

` だから、` ` は一番最初じゃないよ」とブラウザに無視されてしまいます。「一番最初（最後）に何がいるか？」を意識する癖をつけると、CSSはグッと扱いやすくなります。もし動かなかったら、HTMLの構造をもう一度だけ覗いてみてください。「あ、変なタグが混ざってた！」という発見があるはずです。 — 最後に：CSSは「ルール」を楽しむもの

CSSの記述を減らし、メンテナンス性を高める。これはプロが現場で常に考えていることです。今回紹介した `:first-child` や `:last-child` を使いこなすことは、その第一歩です。

最初は思い通りにならなくて当たり前。ブラウザとの対話を楽しんでください。「どうして君はそう動いたの？」とコードを眺めているうちに、CSSという言語が少しずつ、あなたの味方になってくれるはずです。

次は、これらを組み合わせて「一行おきに色を変える」なんて技にも挑戦してみましょうか。でも、まずは今日学んだ「行列の先頭と最後」の魔法を、ぜひご自身のコードで試してみてくださいね。

応援していますよ！