親要素内での順序に基づいて要素を選択できる擬似クラスです。リストやグリッドの偶数・奇数行、特定のパターンにスタイルを適用する際に便利です。
:nth-child(n) { ... }バリアント odd: / even: / nth-{n}: を先頭に付けて使います
| odd:bg-gray-50 | :nth-child(odd) { background-color: ... } |
nth-3: や nth-[3n+1]: のような指定もv4で可能。
li:nth-child(2n) {
background: #f3f4f6;
}偶数番目のリストアイテムに背景色を付ける
.grid-item:nth-child(3n+1) {
border-left: 2px solid #3b82f6;
}3の倍数+1番目のグリッドアイテムに左枠線を付ける
nは0から始まる整数。even/oddや数式も使える。
0番目は存在しないので注意。nth-of-typeとの違いも理解しよう。
:nth-child()は「親の中での位置」で数え、型は無関係です（型で数えるのは:nth-of-type()）。混在した子要素があるとAIもこの2つを取り違えます。また比較的新しいof構文（:nth-child(2 of .item)）を使うと「特定クラスの中でn番目」が選べ、従来JSが必要だった選択がCSSで書けます。
非表示要素が混ざるリストで「表示中の要素の偶数番目」だけ装飾したい。:nth-childのof構文で書いて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。