# :nth-child()

> 親要素内での順序に基づいて要素を選択できる擬似クラスです。リストやグリッドの偶数・奇数行、特定のパターンにスタイルを適用する際に便利です。

- カテゴリ: 擬似クラス
- URL: https://www.css-dictionary.com/property/pseudo-nth-child/

## 構文

```css
:nth-child(n) { ... }
```

## Tailwindでは

- バリアント: `odd: / even: / nth-{n}:` を先頭に付けて使う
- `odd:bg-gray-50` → :nth-child(odd) { background-color: ... }
- 補足: nth-3: や nth-[3n+1]: のような指定もv4で可能。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 3.5+ / Safari 3.1+ / Edge 12+

## コード例

### 例1: 偶数番目のリストアイテムに背景色を付ける

```css
li:nth-child(2n) {
  background: #f3f4f6;
}
```

### 例2: 3の倍数+1番目のグリッドアイテムに左枠線を付ける

```css
.grid-item:nth-child(3n+1) {
  border-left: 2px solid #3b82f6;
}
```

## TIPS

nは0から始まる整数。even/oddや数式も使える。

## よくある間違い

0番目は存在しないので注意。nth-of-typeとの違いも理解しよう。

## AIがよく間違えるポイント

:nth-child()は「親の中での位置」で数え、型は無関係です（型で数えるのは:nth-of-type()）。混在した子要素があるとAIもこの2つを取り違えます。また比較的新しいof構文（:nth-child(2 of .item)）を使うと「特定クラスの中でn番目」が選べ、従来JSが必要だった選択がCSSで書けます。

## AIへの依頼文例

- 非表示要素が混ざるリストで「表示中の要素の偶数番目」だけ装飾したい。:nth-childのof構文で書いて

## 関連プロパティ

- [pseudo-nth-of-type](https://www.css-dictionary.com/property/pseudo-nth-of-type.md)
- [pseudo-first-child](https://www.css-dictionary.com/property/pseudo-first-child.md)
- [pseudo-has](https://www.css-dictionary.com/property/pseudo-has.md)