同じタグ名の要素の中での順序に基づいて要素を選択する擬似クラスです。:nth-child()との違いは、タグ名を考慮することです。見出しやセクション要素に特に有用です。
:nth-of-type(n) { ... }バリアント nth-of-type-{n}: を先頭に付けて使います
first-of-type: / last-of-type: もある。
h2:nth-of-type(2n) {
color: #3b82f6;
}段落1 (p)
段落2 (p)
偶数番目のh2要素だけを青色にする
p:nth-of-type(1) {
font-weight: bold;
margin-top: 0;
}最初の段落です (p:nth-of-type(1)) ← 太字・上マージン0
2番目の段落です (p:nth-of-type(2)) ← 通常スタイル
3番目の段落です (p:nth-of-type(3)) ← 通常スタイル
最初のp要素を太字にして上マージンを削除
img:nth-of-type(3n) {
border: 2px solid #f59e42;
}3の倍数番目の画像に枠線を付ける
article:nth-of-type(odd) {
background: #f8fafc;
}奇数番目のarticle要素に背景色を付ける
:nth-child()は全ての子要素をカウントするが、:nth-of-type()は同じタグ名の要素のみをカウントする。見出しレベルや画像の装飾に便利。
:nth-child()と混同しやすい。クラス名ではなくタグ名で判断されることに注意。
:nth-of-type()が数えるのは「同じ要素型（タグ）」の中での順番で、クラスは考慮されません。「.item の3番目」のつもりで div.item:nth-of-type(3) と書くと、クラスのないdivも数に入るためズレます——これはAIの生成コードでも頻出のバグです。クラス基準なら:nth-child(n of .item)が正解です。
このnth-of-typeの選択がズレる原因を、childとof-typeの数え方の違いから特定して修正して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。