CSSを書いていると、
「この中の○番目だけデザイン変えたい」
「奇数行と偶数行で見た目を変えたい」
そんな場面に必ず出てきます。
そのときに使うのが nth-child です。
nth-child とは何か
nth-child は、
「親要素の中にある子要素の順番」に注目してスタイルを当てるための仕組みです。
クラス名やIDを追加しなくても、
並び順だけで指定できるのが最大の特徴です。
どういう時に使うのか
繰り返し要素の中で一部だけ変えたい時
よくあるのが、こんなケースです。
リストの3番目だけ強調したい
カード一覧の最初だけ大きくしたい
メニューの最後だけ余白を消したい
HTMLをいじらず、CSSだけで対応できるのが nth-child の強みです。
偶数・奇数でデザインを変えたい時
一覧表示では、
偶数行だけ背景色を変える
奇数番目だけレイアウトをずらす
といったデザインがよくあります。
こういう「交互に変えるデザイン」は、
nth-child を使うと一気に楽になります。
CMS や自動生成されたHTMLを触れない時
WordPressやReactなどでは、
HTMLに自由にクラスを付けられない
要素数が増減する
ということがよくあります。
nth-child は
「構造と順番」だけを頼りに指定できるので、
動的なHTMLと相性がいいです。
デザインルールをCSS側にまとめたい時
nth-child を使うと、
HTMLはシンプルな構造のまま
デザインのルールはCSSに集約
という分離がしやすくなります。
後からデザインを変えたい時も、
HTMLを触らずCSSだけ修正すれば済むのは大きなメリットです。
注意点もある
便利な nth-child ですが、使うときに気をつける点もあります。
「○番目」がどこを基準に数えられているか分かりにくい
要素が増減すると、当たる場所が変わる
思ったより条件が厳密で、ズレると一切当たらない
つまり、
構造をちゃんと理解していないと事故りやすいです。
nth-child を使うべきタイミングまとめ
nth-child は、こんな時に使うと強いです。
繰り返し要素の中で一部だけ見た目を変えたい
偶数・奇数など「規則性のあるデザイン」を作りたい
HTMLを極力いじらずCSSだけで完結させたい
CMSや自動生成された構造を相手にしている
逆に、
「意味的に役割が違う要素」なら、
素直にクラスを付けた方が読みやすいこともあります。
最後に
nth-child は、
「CSSで構造を読む力」が試されるセレクタです。
使いこなせるようになると、
HTMLを増やさずに表現できる幅が一気に広がります。
最初は混乱しやすいですが、
「親の中で何番目か」を意識する癖をつけると、
自然と理解できるようになります。
