CSSの世界へようこそ。フロントエンドの現場で長年戦ってきた身から言わせてもらうと、CSSは「魔法」のように見えるけれど、実はとても「正直な」言語です。
特に今回取り上げる `first-child`、`last-child`、`only-child` という「構造疑似クラス」。これらは、CSSを書き始めたばかりの人が最初にぶつかる「なんで思っていたのと違う動きをするの？」という壁の代表格です。
でも安心してください。考え方をほんの少し整理するだけで、これらはあなたの強力な武器になります。一緒に紐解いていきましょう。
—
1. 「家族」で考える、場所の特定
この3つの疑似クラスを理解するコツは、CSSを「住所探し」だと思わず、「家族の座り順」だと思ってみることです。
HTMLという家族のリストの中に、兄弟姉妹（要素）たちが横並びに座っていると想像してください。
- `:first-child`（長男・長女）： 「一番端っこに座っている子」
- `:last-child`（末っ子）： 「反対側の端っこに座っている子」
- `:only-child`（一人っ子）： 「他に誰も兄弟がいない、たった一人の子」
シンプルですよね？ では、これらを実際のコードで見てみましょう。
- お味噌汁
- 焼き魚
- お漬物
私だけだよ！
/ 一番最初の子だけ、文字を赤くして目立たせる /
li:first-child {
color: red;
}
/ 一番最後の子だけ、下に線を引く /
li:last-child {
border-bottom: 2px solid gray;
}
/ 一人っ子の時だけ、背景を黄色に /
p:only-child {
background-color: yellow;
}
—
2. 初学者が必ずつまずく「罠」
さて、ここからが現場のリアルな話です。CSSの教科書にはあまり書いていないけれど、知っておかないと泣きを見ることになる「罠」があります。
「兄弟」以外の邪魔者が入るとどうなる？
もし、リストの中に「お味噌汁」や「お漬物」以外の、例えば「広告バナー」や「説明書きのdiv」が混ざっていたらどうなるでしょうか？
実は、`:first-child`たちは「一番最初にある要素が、指定した名前（タグ）じゃないと反応しない」という頑固な性格を持っています。
- お味噌汁
- 焼き魚
注意書き
この場合、`li:first-child` を指定しても、何も起こりません。CSSは「最初の子が`li`であること」を厳しくチェックしているからです。「リストの最初」ではなく、「最初にある要素」を見ていることに注意してくださいね。
—
3. 使い分けの極意：現場の知恵
実務では、以下のような使い分けをするとミスが激減します。
- `first-child` は「区切り線」を消すときに使う
リストの間に線を引く際、「一番上の線はいらないな」という場面がありますよね。そんな時、`border-top: none;` を `first-child` に当てるのは、現場の定石中の定石です。
- `only-child` は「例外処理」の救世主
「要素が1つしかない時だけ、特別なレイアウトにしたい（例えば、中央寄せにしたい）」というデザイン要件はよくあります。そんな時、わざわざJSで制御しなくても、`only-child` を使えばCSSだけでスマートに解決できます。
—
最後に：失敗しても大丈夫
CSSを触っていると、「あれ、効かないな？」「全部赤くなっちゃった！」なんてことは毎日起こります。それはあなたが下手なのではなく、ブラウザがとても正直に、あなたの書いたコードを読み取っている証拠です。
もし思い通りにいかなくなったら、ブラウザの「検証ツール（デベロッパーツール）」を開いて、HTMLの構造をもう一度眺めてみてください。
「今、誰が兄弟の先頭にいるんだっけ？」
そうやって一つずつ紐解いていくうちに、いつの間にかCSSの構造が手に取るようにわかる日が必ず来ます。焦らず、楽しみながらコーディングしてくださいね。応援しています！
コメント