Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

sibling-count() and sibling-index()

sibling-count() は CSS の関数で、それが使用されている要素の兄弟 DOM 要素（親要素の直接の子）の総数（自分自身を含む）を表す整数を返します。

メモ: counter() 関数は同様の結果を <string> で返す（これは生成コンテンツにより適しています）のに対し、 sibling-index() は <integer> で返します（これは計算に使用することができます）。

CSS関数動的スタイリング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
sibling-count
138
138
26.2
138
26.2
その他
css.types.sibling-index

sibling-index() は CSS の関数で、 DOM ツリー内におけるすべての兄弟要素に対する、現在の要素の相対的な位置を表す整数を返します。返される値は、親要素内のすべての兄弟要素の中で、コンテキストの子要素の位置のインデックス番号です。最初の子は 1、最後の子は Element.children の length を返します。
138
138
26.2
138
26.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.item {
  width: calc(100% / sibling-count());
  animation-delay: calc(sibling-index() * 0.1s);
}

ライブデモ

equalwidth (3siblings)

CSS equalwidth (3siblings) demo.

プレビュー全画面表示

equalwidth (4siblings)

CSS equalwidth (4siblings) demo.

プレビュー全画面表示

delayanime

CSS delayanime demo.

プレビュー全画面表示

実務での使いどころ

  • 兄弟要素数に基づく動的レイアウト

    兄弟要素の数に応じて各要素の幅を自動計算し、JavaScriptなしで均等分割レイアウトを実現します。

注意点

  • Firefoxでは未サポートであり、代替手段としてJavaScriptでのスタイル設定が必要な場合があります。

アクセシビリティ

  • sibling-index()によるアニメーション遅延の設定時は、prefers-reduced-motionメディアクエリでアニメーションを無効化する設定も併せて提供してください。

参考リンク