CSSの進化は、時に私たちフロントエンドエンジニアを狂喜乱舞させ、そして時に「これまでのハックは何だったんだ」と深い虚無感を与えてくれます。中でも `:nth-child()` の拡張構文である `:nth-child(an+b of selector)` は、長年私たちがJavaScriptの介入や、不毛なDOM構造の変更、あるいはCSS設計の歪みで涙を飲んで解決してきた課題を、一撃で、しかも美しく屠り去るポテンシャルを秘めたマイルストーンです。
今日は、この「`of selector` 付き `nth-child`」について、ブラウザのパースエンジンやメモリ効率、そして実務の現場で踏み抜きがちな地雷の回避策まで、ギークの視点から徹底的に解剖していこうと思います。
—
なぜ従来の `:nth-child()` では不十分だったのか？
CSSの基本をかじった人間なら誰しも一度は絶望した経験があるはずです。例えば、リスト構造の中で `.active` クラスが付与されたアイテムを除外して、偶数番目だけをスタイリングしたい、といった要件。
これまでの愚直なアプローチはこうでした。
/ 従来の絶望的なアプローチ：結局JSでクラスを付け替えるはめになる /
li:nth-child(even) {
background-color: #f0f0f0;
}
/ .active が挟まるとインデックスが狂うため、CSSだけでは制御不能に /
`:nth-child()` は、親要素から見て「何番目の子要素か」をDOMツリー上の物理的な順序で厳密にカウントします。そのため、途中に動的に挿入されるトースト通知、条件付きでレンダリングされるバッジ、あるいはフィルタリングされたリストアイテムなどがあると、インデックスは完全に狂い、CSSのセレクタは無力と化していました。
これを解決するために、私たちは長い間、親のコンテキストを汚染するCSSハックや、余計なラッパー要素の追加、あるいは結局パフォーマンスを殺すJavaScriptによるクラス制御に頼らざるを得なかったのです。
`:nth-child(an+b of selector)` の内部挙動と圧倒的な美しさ
ここに救世主として現れたのが、CSS Selectors Level 4で策定された `:nth-child(an+b of selector)` です。この構文の真髄は、「カウント対象のフィルタリング」と「インデックスの評価」の順序にあります。
ブラウザのレンダリングエンジンは、このセレクタに遭遇すると以下のようなアルゴリズムで要素を特定します。
1. スコープの限定: 対象となる親要素の持つ子要素群から、`of` の後ろで指定されたセレクタ（例：`.is-visible`）に完全一致する要素群を一時的な仮想リストとして抽出する。
2. インデックスの算出: その抽出された仮想リストの先頭から順に、`an + b` の数学的ルールを適用してマッチ判定を行う。
3. スタイルの適用: マッチした実際のDOMノードに対してスタイルを流し込む。
つまり、「DOMツリー全体の中で何番目か」ではなく、「特定の条件に絞り込んだ要素群の中で何番目か」を正確に計算できるようになったのです。
実務での実践コード例
例えば、ECサイトの商品グリッドを想像してください。非表示（フィルタリングアウト）された商品がDOM上に隠されている状態でも、表示されている商品（`.is-available`）だけで「3つに1つのアクセントカラー」を適用したい場合、この構文は以下のように記述できます。
/
解説:
親要素内の全子要素から “.is-available” クラスを持つ要素だけを抽出し、
その抽出されたグループの中で「3n番目（3の倍数）」の要素に背景色を適用する。
/
.product-grid > .product-card:nth-child(3n of .is-available) {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%);
border-left: 4px solid #ff6b6b;
}
/
応用:
フィルタリングされた結果の「最初（1番目）」と「最後（算出されたインデックスの終端）」を
同時にスタイリングするような高度なレイアウト制御も可能になります。
/
.product-grid > .product-card:nth-child(1 of .is-available) {
grid-column: span 2; / 最初の商品は大きく見せる /
}
このアプローチの美しさは、JavaScriptのステート管理からスタイリングの責務を完全に切り離し、純粋な宣言的UIとしてブラウザのネイティブスピードに処理を委譲できる点にあります。
—
レンダリング負荷とメモリ効率：上級エンジニアが懸念すべきポイント
「便利だからといって、あらゆる場所で `of selector` を乱用していいのか？」
当然、シニアなエンジニアならここで立ち止まるはずです。ブラウザの内部挙動を愛する者として、ここをスルーするわけにはいきません。
1. マッチングコスト（Selector Matching）の増大
通常の `:nth-child(an+b)` は、DOMノードのポインタが持つインデックスを数えるだけの非常に軽量な処理です（O(1)に近いコスト）。
しかし、`of selector` が付与された瞬間、ブラウザは子要素をスキャンし、各要素が指定されたセレクタにマッチするかどうかを判定するフィルタリングのステップ（O(N)の計算量、Nは子要素の数）が追加されます。
もし、数千件のアイテムを持つ巨大な仮想リストやフラットなテーブルの行に対して、複雑な複合セレクタ（例: `:nth-child(2n of .card.is-active:not(.is-pinned))`）を指定した場合、DOMの再描画（Reflow/Repaint）やスタイルの再計算（Style Recalculation）のたびに、ブラウザのメインスレッドに追加の負荷がかかります。
2. メモリ効率とキャッシュの効き具合
モダンブラウザ（Blink, Gecko, WebKit）は、CSSセレクタのマッチング結果をキャッシュ（Style Sharing Cacheなど）してパフォーマンスを最適化しようとします。しかし、動的に変化する状態（`.is-active` など）と結びついた複雑な `:nth-child` は、キャッシュのヒット率を下げ、メモリ上のスタイルルール解決テーブルを肥大化させるリスクがあります。
アーキテクチャ上の対策:
- `of` の後ろに指定するセレクタは、できる限りシンプルなクラス名（例: `.is-target`）に留め、子孫セレクタ（` .foo .bar`）のような深い構造指定は避けること。
- 無限スクロールや数千件のDOM要素を持つコンテナの直下で、広範囲にわたる `:nth-child(an+b of …)` を多用しないこと。必要であれば、コンポーネントの粒度を分割し、スコープを小さく保つのが鉄則です。
—
重大なバグの回避策：フォールバックとプログレッシブ・エンハンスメント
現代の主要ブラウザ（Chrome, Safari, Firefox）はすでにこの構文を完全サポートしていますが、レガシー環境や特殊なWebViewをターゲットに含むB2Bアプリケーションなどでは、依然として未対応のブラウザが存在します。
ここで私たちが絶対に犯してはならないミスが、「未対応ブラウザでのスタイルのサイレント崩壊」です。
CSSは、未知の構文や解釈できないセレクタを含むルールセットに出くわした際、そのルール全体を丸ごと無視（Invalid Selectorとして破棄）します。もし `of` 構文がサポートされていない環境で、フォールバックを用意せずにコードを書いていると、その部分のスタイルが綺麗に消失します。
堅牢なプログレッシブ・エンハンスメントの実装パターン
安全なWebアプリケーションを構築するために、私たちは `@supports` ルール、あるいはCSSのカスケーディングの特性を逆用したフォールバック戦略をとる必要があります。
/ — 1. 基本的なフォールバック（レガシー環境向け） — /
/ まず、通常の :nth-child で安全なデフォルトのスタイリングを適用する /
.item-list > li {
margin-bottom: 1rem;
}
.item-list > li:nth-child(even) {
background-color: #fafafa;
}
/ — 2. モダンブラウザ向けの高度なオーバーライド — /
/ @supports を用いて、of 構文が確実に解釈される環境でのみ上書きする /
@supports selector(:nth-child(1 of .is-target)) {
/ レガシーなルールをリセット、あるいは直接上書き /
.item-list > li:nth-child(even) {
background-color: transparent; / 一旦リセットが必要な場合 /
}
.item-list > li:nth-child(2n of .is-target) {
background-color: #e3f2fd;
border-left: 4px solid #2196f3;
}
}
この `@supports selector(…)` によるフィーチャー・ディテクションは、CSSアーキテクチャにおいて非常に強力な武器です。ランタイムエラーを恐れることなく、最先端のセレクタをプロダクション環境に投入するためのパスポートとなります。
—
チーフアーキテクトとしての結び
`:nth-child(an+b of selector)` は、単なる「便利な新機能」の枠を超え、私たちのCSS設計の思想をワンランク上のステージへと引き上げる強力なプリミティブです。
DOMの構造に依存した脆弱なスタイリングから脱却し、意味論（Semantics）に基づいた純粋なセレクタの構築が可能になることで、マークアップの変更に対するレジリエンス（回復力）が劇的に向上します。
もちろん、ブラウザの描画エンジンが裏側で何を行っているのか、そのコストはどこに発生するのかを理解した上でコードを書くこと。それが、単に動くだけのコードと、大規模なスケールに耐えうる堅牢なWebアプリケーションの境界線です。
さあ、エディタを開き、無駄なラッパーdivを削除し、この美しいセレクタでコードベースを浄化しようではありませんか。
コメント