CSSの世界へようこそ。フロントエンドの現場で長年戦ってきた身から言わせてもらうと、CSSは時に「気難しい友人」のように感じることがあるかもしれません。でも、一度そのロジックさえ掴んでしまえば、これほど頼もしい相棒はいません。
今日は、多くの人が「数学っぽくて苦手だな…」と敬遠しがちな `:nth-child()` という強力な武器について、肩の力を抜いてお話ししますね。
—
そもそも `:nth-child()` って何者？
簡単に言えば、「兄弟の中で何番目にいる子を選び出す魔法」です。
想像してみてください。あなたは今、スーパーのレジに並ぶ行列の先頭に立っています。店員さんが「前から3番目の方〜！」と呼びかけたら、該当する人は一歩前に出ますよね。`:nth-child()` は、まさにそれと同じことをHTMLの要素に対して行う命令なんです。
1. まずは基本の「キーワード」から始めよう
数式に飛び込む前に、まずは直感的なキーワードから仲良くなりましょう。
- `:nth-child(odd)`：奇数番目（1, 3, 5…）を選びます。「オッド（奇数）」の響きが覚えにくいなら、「1, 3, 5と飛ばしていく」とイメージしてください。
- `:nth-child(even)`：偶数番目（2, 4, 6…）を選びます。「イーブン（均等）」な偶数です。
/ 奇数行に薄いグレーの背景色をつけて、読みやすくする /
li:nth-child(odd) {
background-color: #f9f9f9;
}
/ 偶数行は強調したいから白にしておく /
li:nth-child(even) {
background-color: #ffffff;
}
これを使うだけで、リストやテーブルがぐっと見違えます。簡単でしょう？
—
2. 噂の数式「an+b」を解読する
ここからが少しだけ「数学」の香りがしてくるゾーンですが、大丈夫。難しく考えないでください。「an+b」は、ただの「ルール説明書」に過ぎません。
- n：0から始まる「回数」です（0, 1, 2, 3…）。
- a：間隔（ステップ）です。
- b：開始位置（オフセット）です。
例えば `:nth-child(3n+1)` と書いたら？
「3つおきに、1番目からスタートする」という意味になります。
1. `n=0`のとき：3×0 + 1 = 1番目
2. `n=1`のとき：3×1 + 1 = 4番目
3. `n=2`のとき：3×2 + 1 = 7番目
つまり、「1, 4, 7, 10…」という具合に要素が選ばれます。
/ 1番目からスタートして、3つずつ間隔を空けて装飾する /
.item:nth-child(3n+1) {
border-left: 5px solid skyblue;
}
—
3. なぜか上手くいかない…と悩んだら
現場でよくある失敗が「要素の種類を間違えること」です。
`:nth-child()` は、「その親の中にある、兄弟すべて」を数えます。例えば、`div`の中に`h2`が1つあって、その後に`p`が5つ並んでいる場合、`:nth-child(1)`を選ぶと`h2`が選ばれます。もし「pタグだけを数えたい」という時は、`:nth-of-type()` という兄弟もいます。
「あれ、思った要素に色がついてくれない！」という時は、「もしかして、自分が数えてる順番の中に、別の種類のタグが混ざってる？」と疑ってみてください。これはベテランでもたまにやってしまう罠です。
—
実践的な使い方のヒント
最後に、現場でよく使う「ちょっと気の利いた」使い方をひとつ。
「3つ並んだカードの、右側の余白だけ消したい」という時、わざわざ最後のカードにクラスをつけたりしていませんか？そんな時こそ `:nth-child()` の出番です。
/ 3列レイアウトのとき、3番目ごとに右の余白を消す /
.card:nth-child(3n) {
margin-right: 0;
}
たったこれだけで、HTMLを汚さずに美しいレイアウトが維持できます。これがCSSアーキテクチャの基本、「HTMLは構造を保ち、CSSで賢く装飾する」という考え方です。
—
最後に：CSSは「実験」がすべて
`:nth-child()` の数式は、頭で考えるよりも、実際に数字を変えてブラウザのプレビューを眺めるのが一番の近道です。「`2n`ってことは偶数か、じゃあ`2n-1`って書いたら奇数になるのかな？」なんて、遊び感覚でいじり倒してみてください。
最初はつまずくのが当たり前。でも、この数式をマスターしたあなたは、もう「CSSが書ける人」から「CSSを操れる人」へと一歩進化しています。
何か上手くいかないことがあったら、いつでもまた聞きに来てくださいね。あなたのWeb制作ライフが、少しでも楽しくなりますように！
コメント