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

:nth-child()

要素の位置に基づいてスタイルを適用する強力なセレクターです。An+Bの数式で偶数・奇数の行や、N番目ごとの要素を選択できます。:first-child、:last-child、:only-childもこのファミリーに含まれます。テーブルのストライプ表示やグリッドの特定位置の要素スタイリングに広く使用されます。

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

概要

要素の位置に基づいてスタイルを適用する強力なセレクターです。An+Bの数式で偶数・奇数の行や、N番目ごとの要素を選択できます。:first-child、:last-child、:only-childもこのファミリーに含まれます。テーブルのストライプ表示やグリッドの特定位置の要素スタイリングに広く使用されます。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 3.1+
Firefox 3.5+

モバイル

Chrome Android 18+
Safari iOS 2+
Firefox Android 4+

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク