すべてのカテゴリ

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 で