Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

:nth-child()

:nth-child() は CSS の擬似クラスで、兄弟要素のグループの中での位置に基づいて選択します。つまり :nth-child() セレクターは、親要素内のすべての兄弟要素同士の位置に従って子要素を選択します。

N番目セレクター位置ベース選択

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:nth-child
1
12
3.5
3.1
18
2
:first-child

:最初の子
4
12
3
3.1
18
4
no parent required

親のない要素と一致します
57
79
52
57
:last-child

`:最後の子`
1
12
1
3.1
18
2
no parent required

親のない要素と一致します
57
79
52
57
no parent required

親のない要素と一致します
57
79
52
57
:nth-last-child

`:nth-last-child()`
4
12
3.5
3.1
18
2
no parent required

親のない要素と一致します
57
79
52
57
:only-child

`:一人っ子`
2
12
1.5
3.1
18
2
no parent required

親のない要素と一致します
57
79
52
17
57
17
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
tr:nth-child(even) {
  background-color: #f5f5f5;
}
li:first-child {
  font-weight: bold;
}
.grid > :nth-child(3n) {
  margin-right: 0;
}

ライブデモ

偶数行ハイライト

CSS の 偶数行ハイライト パターンです。

プレビュー全画面表示

最初の子を強調

CSS の 最初の子を強調 パターンです。

プレビュー全画面表示

3n番目のスタイル

CSS の 3n番目のスタイル パターンです。

プレビュー全画面表示

実務での使いどころ

  • テーブルのストライプ表示

    :nth-child(even)で偶数行に背景色を適用し、テーブルの可読性を向上させるゼブラストライプを実現します。

注意点

  • :nth-child()は要素の型に関係なくすべての兄弟要素をカウントします。型でフィルタリングしたい場合は:nth-of-type()を使用してください。

アクセシビリティ

  • テーブルのストライプ表示で使用する背景色が、テキストとのコントラスト比を維持していることを確認してください。

参考リンク