タグアーカイブ フロントエンド

CSSのsibling-index()とsibling-count()でDOMを数式レイアウト

CSSに<sibling-index()>と<sibling-count()>という2つの関数が追加された。これらは要素の兄弟関係を「数値」として取得し、calc()の中で計算できる。2025年6月時点でChrome 138とSafari 26.2が対応済みで、Firefoxも実装が進行中だ。

この新機能の最大の価値は「ブラウザがすでに知っている情報を、CSSから直接引き出せる」点にある。従来はJavaScriptでループ処理するか、Sassで大量の:nth-child()ルールを生成するしかなかった。それが1行のCSSで完結する。

本記事では、sibling-index()とsibling-count()の基本から実践パターン、注意点までを解説する。WordPressサイトのカスタムCSSを書く制作者にも役立つ内容だ。

従来のスタガードアニメーションが抱えていた問題

カードグリッドに1枚ずつ遅延させて表示する「スタガードカスケード効果」は、見た目がよく実装も簡単に思える。ところが実際には、かなり面倒なコードが必要だった。

:nth-child()の限界

10枚のカードに異なるアニメーション遅延を設定したいとする。従来の方法では、こう書くしかなかった。

li:nth-child(1) { --idx: 1; }
li:nth-child(2) { --idx: 2; }
li:nth-child(3) { --idx: 3; }
/* ...8個分続く... */
li:nth-child(10) { --idx: 10; }

li {
  animation-delay: calc(var(--idx) * 100ms);
}

10項目なら10ルールで済むが、50項目なら50ルールだ。Sassのループでビルド時に数百個のセレクタを生成する方法もあるが、CSSファイルが膨れ上がる。Roman Komarov氏が考案したO(√N)戦略でも、1023要素をカバーするのに63ルールが必要になる。

JavaScript依存の落とし穴

もう1つの方法は、JavaScriptでDOMを走査してインラインスタイルを書き込む方式だ。style="--index: 3" を各要素に付与する。動作はするが、レイアウトのための値がスクリプトに分散し、半年後に別の開発者がコンポーネントをリファクタリングした際に静かに壊れる。ブラウザはすでに「どの要素が3番目の子か」を知っているのに、CSSからはその情報にアクセスできなかった。

Smashing Magazineの記事で著者の一人が指摘するように、この状況は「ブラウザがすでに持っているデータを、わざわざ手動で再計算している」矛盾だった。

sibling-index()とsibling-count()の基本

この2つの関数はCSS Values and Units Module Level 5で定義されている。どちらも引数を取らず、CSSの宣言内で直接数値として使える点が革新的だ。

counter()との違いに注意したい。counter()は文字列を返し、疑似要素のcontentプロパティ内でしか使えない。一方、sibling-index()はCSS内の任意の場所で使える実数だ。時間値や角度、ピクセル値との計算もCSSが自動的に型変換する。

:nth-child()との本質的な違い

:nth-child()は「セレクタ」であり、要素を選択するための仕組みだ。calc(:nth-child() * 10px)のような書き方はできない。sibling-index()は「宣言の中で使える値」を生成する。両者は役割が異なり、補完関係にある。

実践的なユースケース

これらの関数が整数を返すと理解できれば、応用の幅は一気に広がる。以下に、WordPressサイトのカスタマイズにも活用できるパターンを紹介する。

リバーススタガー

最後の項目から先にアニメーションさせたい場合は、引き算で反転する。

.card {
  animation: fade-in 0.4s ease both;
  animation-delay: calc((sibling-count() - sibling-index()) * 80ms);
}

最後の子要素は (N – N) × 80ms = 0ms で即座に表示される。最初の子要素は (N – 1) × 80ms の遅延となる。ページ読み込み直後からアニメーションが始まり、待ち時間が生じない。

自動均等幅

タブやカラムの幅を子要素の数に応じて自動調整する。

.tab {
  width: calc(100% / sibling-count());
}

5つのタブなら各20%、6つ目が追加されれば約16.66%になる。メディアクエリやリサイズ監視、JavaScriptは不要だ。ただし項目が増えすぎてタブが細くなりすぎる場合は、Flexboxの折り返しなど別の手法を併用する判断も必要になる。

色相分布

カラーホイール上で均等に色を分散させる。

.swatch {
  background-color: hsl(
    calc((360deg / sibling-count()) * sibling-index()) 70% 50%
  );
}

3項目なら120度間隔、12項目なら30度刻みで色相が割り当てられる。DOM内の項目数に応じてパレットが自動調整されるため、JavaScriptのカラーライブラリで行っていた処理をCSSだけで完結できる。

円形メニュー

項目を円周上に配置する計算も、CSSの三角関数と組み合わせればシンプルになる。

.radial-item {
  --angle: calc((360deg / sibling-count()) * sibling-index());
  --radius: 120px;

  position: absolute;
  left: calc(50% + var(--radius) * cos(var(--angle)));
  top: calc(50% + var(--radius) * sin(var(--angle)));
  transform: rotate(calc(var(--angle) * -1));
}

6項目なら六角形、8項目なら八角形になる。項目を追加・削除すればレイアウトが再計算される。JavaScriptで座標を逐一計算する必要はない。

Z-indexスタッキング

カードを扇状に重ねる表現も1行で済む。

.card {
  z-index: calc(sibling-count() - sibling-index());
}

最初のカードが最も高いz-indexを持ち、最後のカードは0になる。逆順にしたい場合は計算式を反転すればよい。

注意点と制限事項

仕様を読み込んでも気づきにくい落とし穴がいくつかある。実際に使い始める前に把握しておきたい。

Shadow DOMのスコープ

sibling-index()とsibling-count()は「DOMツリー」に対して動作し、フラット化された視覚ツリーではない。この違いはWeb Componentsを使う場面で問題になる。

カスタム要素内のシャドウDOMで内部のdivにsibling-index()を適用すると、slotで投影された外部コンテンツはカウントされない。slotが300要素を投影していても、シャドウツリー内ではsection直下の子要素はslot要素とdivの2つだけだ。

また、外部のスタイルシートから::part()経由でコンポーネント内部にsibling-index()を使おうとすると、ブラウザは0を返す。これはサードパーティコンポーネントの内部構造を外部CSSから探られるのを防ぐための意図的な設計だ。

疑似要素はカウントされない

::beforeや::afterは兄弟要素ではない。sibling-count()に含まれず、自身のsibling-index()も持たない。ただし、疑似要素の宣言内でこれらの関数を使うことは可能だ。その場合、疑似要素ではなく「元の要素」のインデックスが評価される。

display:noneでもカウントされる

これは特に注意が必要だ。display:noneを指定した要素はレイアウトツリーから消えるが、DOMツリーには残っている。sibling-index()はDOMツリーを見るため、非表示要素もカウントしてしまう。

visibility:hiddenやopacity:0も同様にカウントされるが、これらは要素が空間を占有し続けるため直感的にも理解しやすい。display:noneだけが「視覚的に消えているのにDOMスロットを占有している」という特殊な挙動になる。

カスタムプロパティの即時評価

親要素で –idx: sibling-index() と定義すると、その値は親要素自身のインデックスで即座に解決される。すべての子要素が同じ固定値を継承してしまい、意図した動作にならない。

正しい方法は、関数を必要な要素自身に直接適用することだ。

/* 誤り：親で定義すると全子要素が同じ値を継承 */
.parent {
  --idx: sibling-index();
}

/* 正解：各子要素で個別に定義 */
.child {
  --idx: sibling-index();
  animation-delay: calc(var(--idx) * 100ms);
}

CSSWGでは@propertyのinherits:declaration拡張が議論されているが、まだ仕様化には至っていない。当面は各要素に直接適用するのが安全だ。

大規模DOMでのパフォーマンス

DOMの変更（要素の追加、削除、並べ替え）は、影響を受ける兄弟要素すべてのスタイル再計算を引き起こす。この処理はカスケードフェーズで行われるため、JavaScriptでループしてインラインスタイルを書き込む従来の方法よりは高速だ。

ただし、1万子要素を持つコンテナの先頭に要素を挿入すると、後続の全要素のインデックスが再計算される。ナビゲーションやカードグリッドのような通常の用途では問題にならないが、リアルタイム株価表示や無限スクロールフィードなど、数千ノードが常時入れ替わる場面では、仮想化ウィンドウ内でJavaScript管理のインデックスを使い続ける方が無難だ。

アクセシビリティへの配慮

これらの関数は純粋に「視覚的」なものである点を強調しておきたい。見た目を変えるだけで、意味を変えるわけではない。

sibling-index()の計算結果を使ってorderプロパティやグリッド配置でリストを視覚的に並べ替えた場合でも、スクリーンリーダーはDOMのソース順で読み上げる。キーボードのタブ順もDOM順に従う。視覚レイアウトとセマンティック構造が矛盾すれば、アクセシビリティ上の問題になる。

データグリッドやラジアルメニューなど、ツリーカウントに依存するインタラクティブなコンポーネントでは、JavaScriptでARIA属性（aria-posinsetやaria-setsize）を同期させる必要がある。CSSが計算した値とARIAが伝える情報が食い違えば、支援技術のユーザーには壊れた体験が提供される。

ブラウザ対応とフォールバック戦略

2025年6月時点で、Chrome/Edge 138とSafari 26.2が安定版で対応している。FirefoxはMozillaのポジションが肯定的で実装作業が進行中だが、安定版にはまだ含まれていない。最新の対応状況はcaniuseで確認することを推奨する。

ChromeとSafariで世界のトラフィックの約75〜80%をカバーするが、Firefox未対応の間はフォールバックが必須だ。

/* すべてのブラウザで動作するベースライン */
.item {
  width: 25%;
  animation-delay: 0ms;
}

/* 対応ブラウザでプログレッシブエンハンスメント */
@supports (z-index: sibling-index()) {
  .item {
    width: calc(100% / sibling-count());
    animation-delay: calc(sibling-index() * 80ms);
  }
}

Firefoxには静的なフォールバック、対応ブラウザには数式レイアウトを提供する。どのブラウザでもページが壊れることはない。

ポリフィルについて補足すると、JavaScriptで兄弟要素をループしてインラインスタイルを設定する方式は、まさにこれらの関数が置き換えようとしているものだ。Juan Diego Rodríguez氏が公開している段階的移行の手法では、Roman Komarov氏のカウンティングハックなど既存のCSSテクニックを橋渡しとして活用し、ネイティブ対応までの移行期間をしのぐアプローチを提案している。

今後の展望

現在の仕様では「すべての要素兄弟」をカウントするのみだが、CSSWGのIssue #9572では、:nth-child()と同様の「of セレクタ」引数の拡張が計画されている。

sibling-index(of .active)のような記法が実現すれば、特定のセレクタに一致する兄弟だけをカウントできる。全体で8番目の子だが.activeクラスを持つ中では3番目、という要素は3を返す。フィルタリングやトグル表示を伴う動的なUIでも、DOM操作なしで連続したインデックスを維持できるようになる。

さらに、children-count()とdescendant-count()の提案もCSSWGで議論されている。children-count()は要素が持つ子要素の数、descendant-count()はすべての子孫を再帰的にカウントする。sibling-index()とsibling-count()が「兄弟の間での自分の位置」という水平方向の情報を提供するのに対し、children-count()とdescendant-count()は「自分の下に何があるか」という垂直方向の情報を提供する。両方が揃えば、CSSからDOMツリーを俯瞰できるようになる。

10個の:nth-child()ルールを書きながら「もっと良い方法があるはずだ」と感じていた制作者にとって、その「もっと良い方法」がようやくブラウザに実装されつつある。CSSがDOMツリーを「理解」し始めたことで、レイアウトの表現力は次の段階に入ったと言える。

この記事のポイント

• sibling-index()とsibling-count()はDOMツリーの構造をCSSから数値として取得できる新関数である
• スタガードアニメーションや均等幅レイアウトが1行のCSSで完結し、JavaScriptや大量の:nth-child()ルールが不要になる
• Chrome 138とSafari 26.2が対応済み、Firefoxは実装進行中で@supportsを使ったフォールバックが必須
• display:noneの要素もカウントされる点、カスタムプロパティの即時評価、Shadow DOMのスコープに注意が必要
• 視覚的な並べ替えはアクセシビリティ上の問題を引き起こすため、ARIA属性との同期が欠かせない

海田 洋祐

・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、Java等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験

www.aandgweb.co.jp