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

:nth-child() of S syntax

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

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
of syntax
111
111
113
9
111
9
of syntax

`of <selector>` 構文
111
111
113
9
111
9
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
/* Count only elements with the .visible class and style every other one */
li:nth-child(even of .visible) {
  background: #f3f4f6;
}

/* Apply a striped pattern only to the .active rows in the table */
tr:nth-child(odd of .active) {
  background: #eff6ff;
}

ライブデモ

表示要素の偶数番目

:nth-child() of S syntax の 表示要素の偶数番目 パターンです。

プレビュー全画面表示

activeの奇数番目

:nth-child() of S syntax の activeの奇数番目 パターンです。

プレビュー全画面表示

特定クラスの最初

:nth-child() of S syntax の 特定クラスの最初 パターンです。

プレビュー全画面表示

実務での使いどころ

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

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

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

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

注意点

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

アクセシビリティ

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

参考リンク