sibling-count() and sibling-index()

概要

sibling-count()は兄弟要素の総数を、sibling-index()は現在の要素の兄弟間での位置（0始まり）を返すCSS関数です。calc()やmod()などの数学関数と組み合わせることで、兄弟の数や位置に基づいた動的なスタイリングが可能になります。グリッドアイテムの幅自動計算やリストアイテムの段階的なアニメーション遅延の設定などに活用できます。

対応ブラウザ

基本構文

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

実務での使いどころ

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

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — sibling-count() and sibling-index()