CSS :nth-child()セレクター - 位置による選択

:nth-child()セレクター

:nth-child()擬似クラスは、兄弟間の位置に基づいて要素を選択します。引数として数式、キーワード、または特定の数値を受け取ります。

構文

:nth-child(An + B) { }

Aはサイクルサイズ（ステップ）、nは0から始まるカウンター、Bはオフセットです。

よくあるパターン

パターン	マッチ	ユースケース
:nth-child(odd)	1番目、3番目、5番目...	ゼブラストライプテーブル
:nth-child(even)	2番目、4番目、6番目...	交互の行色
:nth-child(3)	3番目の子のみ	特定の位置指定
:nth-child(3n)	3つごと（3, 6, 9...）	カラムベースのレイアウト
:nth-child(3n+1)	3つごとの最初（1, 4, 7...）	各行の最初
:nth-child(n+4)	4番目以降	最初の数項目をスキップ
:nth-child(-n+3)	最初の3つのみ	範囲の選択

ゼブラストライプテーブル

tr:nth-child(even) {
  background-color: #f5f5f5;
}

最初のN個の要素を選択

/* 最初の5項目のみ */
li:nth-child(-n+5) {
  font-weight: bold;
}

範囲の選択

/* 3番目から7番目の項目 */
li:nth-child(n+3):nth-child(-n+7) {
  background: yellow;
}

:nth-child vs :nth-of-type

:nth-child()はタイプに関係なくすべての兄弟をカウントします。:nth-of-type()は同じ要素タイプの兄弟のみをカウントします：

<div>
  <span>A</span>
  <p>B</p>      <!-- p:nth-child(2) かつ p:nth-of-type(1) -->
  <p>C</p>      <!-- p:nth-child(3) かつ p:nth-of-type(2) -->
</div>

詳細度

:nth-child()の詳細度は**(0, 1, 0)** — クラスセレクターと同じです。