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

こんにちは。Webの世界へようこそ。
CSSを学び始めると、最初は「文字の色を変える」「大きさを変える」といった魔法のような体験にワクワクしますよね。でも、いざ本格的なレイアウトを作ろうとすると、「あれ？この要素だけ少し余白が欲しいのに、全部に余白がついちゃう！」なんていう壁にぶつかることはありませんか？

そう、そんな時こそ、CSSの「構造的疑似クラス」という、ちょっと賢い助っ人の出番です。今日はその中でも、最も優しくて頼りになる `:first-child` （ファースト・チャイルド）について、じっくりお話ししましょう。

—

`:first-child` って何者？

直訳すると「最初の子」。その名の通り、「ある親要素の中に並んでいる兄弟たちの中で、一番最初のお兄ちゃん（またはお姉ちゃん）だけに特別なスタイルをあげる」というセレクタです。

例えば、スーパーのレジの列を想像してみてください。
「一番最初に並んでいる人だけ、ちょっと特別なクーポン券を渡す」といった仕組みを作りたいとき、いちいちその人に名前をつけて特別な印をつけるのは面倒ですよね？ そこでこの `:first-child` を使えば、「列の先頭にいる人！」と指定するだけで、自動的に対象を見つけてくれるんです。

なぜこれが必要なの？（「余白問題」を例に）

Web制作で最もよくある「あるある」が、リストの余白問題です。
例えば、メニューバーを作るとき、すべてのボタンに `margin-top`（上の余白）をつけると、一番上のボタンにも余白がついてしまい、親ボックスから少し浮いて見えてしまいます。

「一番上のボタンだけ余白を消したい！」
そんなとき、これまでは個別にクラス名をつけて消していましたが、`:first-child` を使えばこんなにスマートに解決できます。

実践！コードを見てみよう

/ リストのすべての項目に上の余白をつけたい /
li {
margin-top: 20px;
}

/ でも、一番最初の子要素（最初のお兄ちゃん）だけは余白をゼロにする！ /
li:first-child {
margin-top: 0;
}

どうでしょう？ これだけで、全体にルールを適用しつつ、最初の子だけルールを書き換えるという「例外処理」が、とっても綺麗なコードで書けてしまうんです。

—

つまずきやすいポイント：ここだけ気をつけて！

初心者の皆さんがよくやってしまう間違いが、「 `:first-child` は親要素の最初の要素につける」というルールを少し勘違いしてしまうこと。

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

ここで `li:first-child` と書くと、しっかり「メニュー1」が選ばれます。でも、もしここに `