Widely available YES。Chrome 111・Safari 15・Firefox 113以降で対応。Baseline Widely available。本番利用可能。
セレクター Widely available

:nth-child() of S syntax

:nth-child(An+B of S) 構文は、セレクター S にマッチする要素だけをカウント対象として nth-child を計算する。従来は全兄弟を数えるしかなかったが、フィルタリングされた要素群のみを対象にできるようになった。

セレクターフィルタリング

概要

:nth-child(An+B of S) 構文は、セレクター S にマッチする要素だけをカウント対象として nth-child を計算する。従来は全兄弟を数えるしかなかったが、フィルタリングされた要素群のみを対象にできるようになった。

対応ブラウザ

デスクトップ

Chrome 111+
Edge 111+
Safari 9+
Firefox 113+

モバイル

Chrome Android 111+
Safari iOS 9+
Firefox Android 113+

基本構文

CSS 
/* .visible クラスの要素だけを数えて偶数番目にスタイル */
li:nth-child(even of .visible) {
  background: #f3f4f6;
}

/* テーブルの .active 行だけで縞模様 */
tr:nth-child(odd of .active) {
  background: #eff6ff;
}

実務での使いどころ

  • フィルタリング済みリストの縞模様

    検索やフィルターで表示中の行だけを対象に交互背景色を適用。

  • 条件付きインデックス選択

    特定クラスの要素だけを数えて最初の N 件にスタイルを適用。

注意点

  • of S 構文は比較的新しいため、古いブラウザではフォールバックが必要。
  • フィルタリング対象が動的に変わる場合、JSとの連携を検討する。

アクセシビリティ

  • 縞模様のテーブルでは色のコントラスト比を十分に確保する。

参考リンク