# :nth-of-type()

> 同じタグ名の要素の中での順序に基づいて要素を選択する擬似クラスです。:nth-child()との違いは、タグ名を考慮することです。見出しやセクション要素に特に有用です。

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

## 構文

```css
:nth-of-type(n) { ... }
```

## Tailwindでは

- バリアント: `nth-of-type-{n}:` を先頭に付けて使う
- 補足: first-of-type: / last-of-type: もある。

## ブラウザ対応

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

## コード例

### 例1: 偶数番目のh2要素だけを青色にする

```css
h2:nth-of-type(2n) {
  color: #3b82f6;
}
```

### 例2: 最初のp要素を太字にして上マージンを削除

```css
p:nth-of-type(1) {
  font-weight: bold;
  margin-top: 0;
}
```

### 例3: 3の倍数番目の画像に枠線を付ける

```css
img:nth-of-type(3n) {
  border: 2px solid #f59e42;
}
```

### 例4: 奇数番目のarticle要素に背景色を付ける

```css
article:nth-of-type(odd) {
  background: #f8fafc;
}
```

## TIPS

:nth-child()は全ての子要素をカウントするが、:nth-of-type()は同じタグ名の要素のみをカウントする。見出しレベルや画像の装飾に便利。

## よくある間違い

:nth-child()と混同しやすい。クラス名ではなくタグ名で判断されることに注意。

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

:nth-of-type()が数えるのは「同じ要素型（タグ）」の中での順番で、クラスは考慮されません。「.item の3番目」のつもりで div.item:nth-of-type(3) と書くと、クラスのないdivも数に入るためズレます——これはAIの生成コードでも頻出のバグです。クラス基準なら:nth-child(n of .item)が正解です。

## AIへの依頼文例

- このnth-of-typeの選択がズレる原因を、childとof-typeの数え方の違いから特定して修正して

## 関連プロパティ

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