こんにちは！CSSを学び始めて、「よし、すこしずつ思い通りにデザインできるようになってきたぞ！」というワクワク感に包まれている頃でしょうか。それとも、「あれ、思った通りに動いてくれない……」と、ちょっと画面の前で頭を抱えているところでしょうか？
大丈夫ですよ、安心してください。CSSの沼にハマるのは、一人前のフロントエンドエンジニアになるための誰もが通る「通過儀礼」みたいなものです。
さて、今回はCSSの数ある機能の中でも、みんな大好き（だけど、たまに裏切られる）`:first-child`（ファースト・チャイルド）疑似クラスについて、徹底的に深掘りしていきましょう！
「親要素の最初の子要素を選ぶんでしょ？ 簡単じゃん！」と思ったそこのあなた。
実はこの子、見た目の印象よりも少しだけ「おせっかいで純粋無垢な性格」をしています。この性格を理解していないと、「あれ？なんで指定した色にならないの！？」という迷宮に入り込んでしまうんです。
今日は、身近なたとえ話を交えながら、優しく紐解いていきますね。
—
1. `:first-child` ってそもそもどんな子？
まずは基本のキから。`:first-child` は、英語の直訳通り「最初の子ども」を指し示す魔法の呪文（疑似クラス）です。
イメージしてみてください。
あなたがお母さんで、3人の子ども（お兄ちゃん、次男、末っ子）を連れてお買い物をしています。お店のレジで、「一番最初にお店に入ってきた子に、記念の風船をプレゼントします！」と言われました。
このとき、風船をもらえるのは誰ですか？
そう、もちろん一番最初に入ってきたお兄ちゃんですよね。
CSSの世界でもまったく同じです。HTMLという「家族（親要素）」の中にいる「子どもたち（子要素）」のうち、一番上（最初）にいる要素だけにスタイルを適用したいとき、この `:first-child` が使われます。
コードで見てみましょう
例えば、リストタグが3つ並んでいるとします。
- りんご
- みかん
- バナナ
ここで、「一番最初の『りんご』だけに、特別な目印として赤色の太字にしたい！」と思ったとします。そんなときは、こんな風に書きます。
/ リストの中にある、最初の子要素（りんご）を狙い撃ち！ /
li:first-child {
color: #ff3366;
font-weight: bold;
}
これで、ブラウザを開くと「りんご」だけがパッと華やかに目立つようになります。ここまでは「なんだ、簡単じゃないか！」と思いますよね。問題は、ここからなのです。
—
2. つまずきポイント：「あれ？最初の子じゃないのに、スタイリングされちゃった？」
さて、ここからが現場のエンジニアたちが「おや？」と首を傾げやすい、`:first-child` の奥深い（そして少し厄介な）仕様のお話です。
もう一度、先ほどの「お買い物のお話」を思い出してください。
「最初に入ってきた子に風船をあげる」ルールでした。
では、もしHTMLの構造がこんな風になっていたら、どうなるでしょう？
あなたは、「一番最初のメニューである『ハンバーグ定食』の文字サイズを大きくしたいな」と思って、こう書きました。
/ 「pタグの最初の子にスタイルを当てたい！」のつもり /
p:first-child {
font-size: 1.5rem;
}
さあ、画面を見てみてください。
あれ……？ ハンバーグ定食ではなく、その上の 「本日のメニュー（h2タグ）」が大きくなっていませんか？ いや、待てよ、そもそも `h2` には `p` なんて指定していないのに……！？
ここでパニックになってしまう初学者の人が本当に多いんです。
「私は `p` の最初を指定したのに、なんで `h2` が大きくなっちゃうの！？」って。
なぜ、そんなことが起きるのか？
答えはシンプルです。`:first-child` は、「タグの種類（`p` とか `h2` とか）を最初から見てくれているわけではない」からです。
`:first-child` が見ているのは、あくまで親（この場合は `
コメント