CSSの世界へようこそ！フロントエンドの最前線でコードを書き続けていると、「なぜかスタイルが当たらない！」という壁にぶつかることが何度もありますよね。

特に、CSS初心者の方が最初に「おや？」と首をかしげがちなのが、今回解説する `:first-child` という擬似クラスです。これ、名前だけ聞くと「最初の子要素にスタイルを当てるんでしょ？」とシンプルに思えるのですが、実は「ある落とし穴」があるんです。

今日は、その仕組みを一緒に紐解いていきましょう。大丈夫、一度理解してしまえば一生モノの武器になりますからね。

—

`:first-child` を直訳すると「最初の子」ですよね。これはCSSに対して「親要素の中にある、最初の子要素であるターゲットにだけ特別なデザインを適用してね」と命令するものです。

例えば、おもちゃ箱の中にたくさんのおもちゃが入っていると想像してください。あなたが「一番最初に入れたおもちゃに赤いシールを貼って！」と指示したとき、それがぬいぐるみであれ、ミニカーであれ、とにかく「箱の中で一番上にいるやつ」が選ばれます。

ここまではシンプルです。問題は、「指定した名前（タグ）が、一番上にいなかったとき」に起こります。

—

多くの人がつまずくのは、こんなパターンです。

最初の挨拶

二番目
三番目

/ 「spanの中で、最初の子要素なら赤くして！」と書いたつもり /
span:first-child {
color: red;
}

さて、この結果はどうなると思いますか？
実は……何も起きません。

なぜでしょう？CSSはこう考えているんです。
「`span:first-child` だね？よし、親要素の『最初の子』を見に行くぞ。……あれ？一番上にいるのは `

` タグじゃないか。`` じゃないなら、これは僕の探している『最初の子』じゃないな。スルーしよう。」

そうなんです。`:first-child` は「最初の子であること」が絶対条件。「最初の子が、たまたま指定したタグであること」まで求められるんです。ちょっと厳格な性格なんですよね。

—

この仕組みを理解した上で、実際にコードを書いてみましょう。自分のエディタにコピペして、ブラウザで確認してみてください。

タイトル

テキスト1

テキスト2

/ 失敗例：pタグの最初の子を赤くしたいが、一番上にh1がいるので効かない /
p:first-child {
color: red;
}

/ 成功例：h1の直後のpだけを赤くしたいなら、隣接セレクタ(+)を使うのがプロの技 /
h1 + p {
color: blue;
}

現場では、最初の子要素が変わる（CMSなどで動的にHTMLが生成される）ことは日常茶飯事です。そんな時、「何が入っているか分からないけど、とにかくタイトルの直後の段落だけ余白を空けたい」といった要望が必ず出ます。

その場合、`:first-child` に固執するよりも、`h1 + p`（h1のすぐ隣にあるp）のように「関係性」を指定するほうが、コードが壊れにくく、メンテナンスも楽になります。

—

`:first-child` の挙動をまとめるとこうなります。

1. 「最初の子」という席に座っているか？ をチェックする。
2. その座っているやつが、自分が指定したタグと一致するか？ をチェックする。
3. 両方クリアして初めてスタイルが適用される。

もしスタイルが効かなくて悩んだら、「自分は『最初の子』という条件を厳しくしすぎていないかな？」と立ち止まって考えてみてください。

CSSは、一度ルールを覚えてしまえば、これほど素直で忠実な相棒はいません。今日学んだ「厳格な性格」さえ理解していれば、もう怖いものなしです。

Web制作の道は長いですが、一つずつこうした細かな挙動を自分のものにしていけば、必ず「あ、これ知ってる！」と自信を持ってコードを書ける日が来ます。応援していますよ！また何かあればいつでも聞きに来てくださいね。

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