「一番目」ってどっち？ :first-child と :nth-child(1) の違い、まるっと解決！
Webサイトを作っていると、リストの最初の項目だけちょっとデザインを変えたいな、とか、特定の要素にだけスタイルを適用したいな、って場面、よくありますよね？ そんな時に大活躍するのが、CSSの「構造的疑似クラス」というやつなんです。
中でも今日は、リストの「一番最初」を指し示す `:first-child` と `:nth-child(1)` に焦点を当てて、この二つのちょっとした違いと、どっちを使った方が良いのか、ぶっちゃけどうなの？ っていう疑問を、とことん優しく、そして分かりやすく解説していきます！
「え、同じものじゃないの？」って思ったそこのあなた、大丈夫！ 現場で長年CSSと格闘してきた僕が、身近な例え話を交えながら、スッキリ解決しちゃいますから、安心してくださいね。
まずは、おもちゃ箱からお気に入りを一つ取り出すイメージで！
構造的疑似クラスって、なんだか難しそうに聞こえるかもしれません。でも、これは「親要素の中にいる、兄弟要素たちの中で、〇〇番目のやつにスタイルを当ててね」っていう、すごく分かりやすいルールなんです。
例えば、おもちゃ箱の中に、ブロックがいくつか並んでいるのを想像してみてください。
- 一番左にあるブロック
- 右から数えて3番目のブロック
- 全部で5個あるブロックのうち、真ん中のブロック
こんな風に、並び順とか数で指定するイメージです。
CSSの構造的疑似クラスも、まさにこの「並び順」や「数」で要素を選び出すための魔法の言葉なんです。
:first-child って、どんな子？ ～「一番最初」の「一番乗り」！～
`:` は、CSSで「擬似」を意味するマークです。そして `first-child` は、文字通り「最初の子供」という意味。
つまり、`:first-child` は、「親要素の中にいる、兄弟要素の中で、一番最初に出てくる要素」 を指します。
例えば、こんなHTMLがあったとしましょう。
- りんご
- バナナ
- みかん
この場合、`
- ` という親要素の中に、`
- ` という兄弟要素が3つ並んでいますね。
この中で、一番最初に出てくる `
- `、つまり「りんご」を指し示すのが `:first-child` なんです。
/ shopping-list の中の、一番最初の li 要素の文字色を赤にする /
.shopping-list li:first-child {
color: red; / これで「りんご」の文字が赤くなる！ /
}どうです？ なんか、一番手前にいる、一番最初に登場した子、って感じがしませんか？ まるで、運動会の徒競走で、一番早くゴールテープを切った子、みたいなイメージです。
:nth-child(1) って、どんな子？ ～「1番目」っていう番号札の子！～
一方、`:nth-child(1)` はどうでしょう？ `nth` は「n番目」を表し、カッコの中に `1` が入っています。
これも、言葉通りに解釈すると、「親要素の中にいる、兄弟要素の中で、1番目の要素」 を指します。
先ほどの `
- ` の例で考えてみましょう。
- りんご
- バナナ
- みかん
- `、つまり「りんご」を指し示します。
/ shopping-list の中の、1番目の li 要素の文字色を赤にする /
.shopping-list li:nth-child(1) {
color: red; / これも「りんご」の文字が赤くなる！ /
}あれ？ `:first-child` と同じ結果になるじゃないか！ って思いましたよね？
そうなんです。「一番最初に出てくる要素」と「1番目の要素」は、ほとんどの場合、同じもの なんです。
じゃあ、何が違うの？ ～ここが「なるほど！」ポイント！～
では、なぜCSSには `:first-child` と `:nth-child(1)` の二つがあるのでしょうか？ 実は、この二つ、見た目は似ているけれど、「選ぶ基準」がちょっとだけ違う んです。
1. 特異度（Specificity）の違い：どっちが「強い」か
CSSには「特異度」という考え方があります。これは、複数のCSSルールが同じ要素に適用されようとしたときに、「どっちのルールを優先させるか」を決めるための仕組みです。特異度が高い方が優先されます。
- `:first-child` は、疑似クラスなので、特異度は「0, 1, 0」となります。（セレクタの種類で言うと「クラスセレクタ」と同じくらいの強さ）
- `:nth-child(1)` は、疑似クラスですが、カッコの中に数字が入っているため、より具体的な指定とみなされ、特異度は「0, 1, 0」となります。（こちらもクラスセレクタと同じくらいの強さ）
あれ？ これも同じじゃないか！ って思ったかもしれません。
実は、ここがCSSの奥深いところで、`:first-child` と `:nth-child(1)` の特異度は、基本的に同じなんです。ただ、この「数字が入っているかどうか」という違いが、将来的な拡張性や、他の疑似クラスとの組み合わせた時の挙動に、微妙な影響を与えることがある んです。
2. ブラウザのレンダリング最適化：どっちが「速い」か？
これは、CSSの内部的な話になってくるので、普段あまり意識することはないかもしれません。しかし、Webサイトの表示速度を極限まで追求するような現場では、無視できないポイントになってきます。
ブラウザは、CSSを解釈して画面に描画（レンダリング）します。このとき、`:first-child` は「一番最初！」とシンプルに判断できます。一方、`:nth-child(1)` は、「n番目」というルールを処理してから「1番目」かどうかを判断します。
理論上は、`:first-child` の方が、ブラウザが処理しやすい、つまり、ほんのわずかですが、レンダリングが速くなる可能性がある と言われています。
ただ、これは本当に「ほんのわずか」で、現代のブラウザの性能を考えると、この二つだけで体感できるほどの差が出ることは、まずありません。 ほとんどのケースで、気にする必要はないレベルです。
では、どっちを使うべき？ ～現場の「ベストプラクティス」～
ここまでの話をまとめると、
- 機能的には、ほとんど同じ。
- 特異度も、基本的には同じ。
- レンダリング速度も、体感できるほどの差はない。
じゃあ、結局どっちでもいいの？ と思っちゃいますよね。
でも、現場のベテランたちが長年培ってきた「ベストプラクティス」としては、こんな考え方があります。
1. 「一番最初」を明示的に指したいなら、迷わず `:first-child`！
「とにかく、リストの最初の項目だけ！」とか、「一番上の段落だけ！」のように、「一番最初」であることを強調したい、意図を明確にしたい 場合には、`:first-child` を使うのが、コードを見たときに「ああ、一番最初ね！」と直感的に分かりやすいです。
例えば、テーブルのヘッダー行だけデザインを変えたい、なんていうとき。
商品名 価格 りんご 150円 バナナ 100円 この
の中の最初のにスタイルを当てたい場合。 / テーブルのヘッダー部分 (thead) の中の、一番最初の行 (tr) の背景色を薄いグレーにする /
thead tr:first-child {
background-color: #f0f0f0;
}このように `:first-child` を使うことで、コードの意図がよりクリアになります。
2. 「n番目」という汎用性を使いたい、あるいは将来的な拡張性を考慮するなら `:nth-child()` を使う。
`:nth-child()` は、`1` だけでなく、`2`, `3`, `even` (偶数), `odd` (奇数), `3n+1` (3つおきに) など、様々なパターンで要素を選び出すことができる、非常にパワフルな疑似クラスです。
もし、あなたが「今は1番目だけど、もしかしたら将来的に2番目とか3番目も対象にしたいかも…」とか、「このリストは1番目だけじゃなくて、偶数番目の要素にも何かしたいな」と考えているのであれば、最初から `:nth-child()` を使っておく方が、後々のコード修正が楽になる場合があります。
/ shopping-list の中の、1番目の li 要素の文字色を赤にする /
.shopping-list li:nth-child(1) {
color: red; / 「りんご」が赤くなる /
}/ shopping-list の中の、偶数番目の li 要素の背景色を薄い黄色にする /
.shopping-list li:nth-child(even) {
background-color: #ffffcc; / 「バナナ」が黄色くなる /
}このように、`:nth-child()` は、1番目だけでなく、様々なパターンで柔軟に要素を選択できるのが強みです。
結局、どっちでも大丈夫！ でも、意図を明確にしよう！
ここまで色々お話ししてきましたが、結論から言うと、ほとんどの場面で、`:first-child` と `:nth-child(1)` のどちらを使っても、見た目上の結果は同じです。
そして、ブラウザのレンダリング速度に関しても、普通にWebサイトを作っている分には、気にする必要は全くありません。
では、どうやって使い分けるか？
それは、「コードを見た人が、あなたの意図をどれだけ理解しやすいか」 という視点です。
- 「一番最初」を明確に指定したい、コードの意図を分かりやすくしたい → `:first-child`
- 「n番目」という汎用性や、将来的な拡張性を考慮したい → `:nth-child()`
という風に、「なぜこのセレクタを選んだのか」という意図を、コードそのもので表現するのが、プロフェッショナルな開発者の流儀だと僕は思っています。
ちょっと応用編：:has() との組み合わせは、未来の CSS！
最近CSSの世界で話題になっているのが、`:has()` という疑似クラスです。これは「子孫要素に〇〇が含まれる要素」を選ぶ、という、今までになかった強力なセレクタなんです。
例えば、
タイトル
本文です。
この「ボタン（`button`）が含まれている `div.card`」だけを選びたい！ なんていうときに `:has()` が使えます。
/ ボタンが含まれているカードだけ、背景色を黄色にする /
.card:has(button) {
background-color: yellow;
}この `:has()` と `:first-child` や `:nth-child()` を組み合わせることで、さらに複雑で、しかし意図の明確なスタイル指定が可能になります。
例えば、リストの最初の項目が「特別オファー」だった場合に、そのカード全体に特別なスタイルを適用する、なんてことも夢ではありません。
/ リストの最初の項目 (li:first-child) が、特別なクラス (special-offer) を持っている場合、その親要素 (ul) にスタイルを適用する /
.shopping-list li:first-child.special-offer {
/ ここに親要素 (ul) へのスタイルを適用する、というよりは、
:has() を使って親要素を指定する方が現代的 /
}/ あるいは、:has() を使って、特定の要素を持つ li にスタイルを適用する /
.shopping-list li:has(.special-offer) {
border: 2px solid gold; / 特別オファーのリストアイテムに金色の枠を付ける /
}まだ `:has()` は対応ブラウザが限定的ですが、これからますます重要になってくる技術です。構造的疑似クラスの理解を深めることで、こうした新しい技術への対応もスムーズになりますよ！
まとめ：迷ったら、一番分かりやすい方を選ぼう！
今日は、`:first-child` と `:nth-child(1)` の違いについて、じっくり解説してきました。
- 基本的には同じもの として扱ってOK。
- 「一番最初」を意図したいなら `:first-child` がコードの可読性を高める。
- 「n番目」という汎用性や将来性を考えるなら `:nth-child()` を使う。
- レンダリング速度の差は、ほとんど気にしなくて良い。
一番大切なのは、「なぜそのセレクタを選んだのか」という意図が、コードを見た人に伝わることです。
もし迷ったら、どっちを使っても正解！ まずは、どちらか一方を使い慣れて、コードを書きながら「あ、こっちの方が意図が伝わるな」と感じた方を選んでいくのが、一番の近道だと思います。
CSSの世界は奥が深いですが、こうして一つずつ、身近な例えで理解を深めていけば、きっとあなたもCSSマスターになれますよ！ 応援しています！
タイトルとURLをコピーしました
この場合、`:nth-child(1)` は、一番最初の `
コメント