:nth-of-type()

擬似クラス

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

構文

Syntax

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

コード例

例 1

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

実行結果

h2:nth-of-type(2n) → 偶数番目のh2要素が青色

見出し1 (h1)

見出し2-1 (h2) ← 1番目

段落1 (p)

見出し2-2 (h2) ← 2番目 (偶数)

段落2 (p)

見出し2-3 (h2) ← 3番目

見出し2-4 (h2) ← 4番目 (偶数)

💡 h2要素のみをカウント。他の要素(h1, p)は無視される

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

例 2

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

実行結果

p:nth-of-type(1) → 最初のp要素を太字＋上マージン削除

記事タイトル (h2)

最初の段落です (p:nth-of-type(1)) ← 太字・上マージン0

画像 (img)

2番目の段落です (p:nth-of-type(2)) ← 通常スタイル

3番目の段落です (p:nth-of-type(3)) ← 通常スタイル

💡 p要素のみをカウント。h2やimgは除外される

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

例 3

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

実行結果

img:nth-of-type(3n) → 3の倍数番目の画像に枠線

img 1

img 2

img 3 ← 枠線

img 4

img 5

img 6 ← 枠線

💡 3, 6, 9...番目のimg要素に枠線が適用される

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

例 4

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

実行結果

article:nth-of-type(odd) → 奇数番目のarticle要素に背景色

記事1 (article:nth-of-type(1)) ← 奇数

背景色付き

記事2 (article:nth-of-type(2))

通常背景

記事3 (article:nth-of-type(3)) ← 奇数

背景色付き

記事4 (article:nth-of-type(4))

通常背景

💡 odd = 奇数 (1, 3, 5...), even = 偶数 (2, 4, 6...)

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

💡 TIPS

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

⚠️ よくある間違い

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

ブラウザサポート

IE9+, 全モダンブラウザ

:nth-of-type()

構文

コード例

例 1

見出し1 (h1)

見出し2-1 (h2) ← 1番目

見出し2-2 (h2) ← 2番目 (偶数)

見出し2-3 (h2) ← 3番目

見出し2-4 (h2) ← 4番目 (偶数)

例 2

記事タイトル (h2)

例 3

例 4

💡 TIPS

⚠️ よくある間違い

関連プロパティ

ブラウザサポート