兄弟要素を数えるCSS関数「sibling-index()」と「sibling-count()」で実現する高度な数学的レイアウト

はじめに

CSSで複雑なレイアウトを組むとき、要素の数や位置に応じてスタイルを変えたいことがあります。これまでは「:nth-child()」や「:nth-of-type()」といった擬似クラスを使って要素の順番を判定するのが一般的でした。しかし、これらの方法は「要素がいくつあるのか」という情報を直接扱うことができず、柔軟性に欠ける場面も少なくありません。

そこで注目されているのが、2024年頃から仕様が議論されているCSSの新関数「sibling-index()」と「sibling-count()」です。これらの関数を使うと、兄弟要素の中での自分の位置や、兄弟要素の総数を数式のように扱えるようになります。本記事では、これらの関数の基本的な使い方から、実際のレイアウトでの応用までを紹介します。

兄弟要素の「数」と「順番」を取得する

「sibling-index()」は、要素が兄弟の中で何番目かを返す関数です。例えば、親要素の3番目の子要素であれば「3」を返します。一方、「sibling-count()」は兄弟要素の総数を返します。これらの値は単なる数値としてではなく、CSSの「calc()」や「min()」「max()」といった関数と組み合わせて使うことができます。

基本的な記法は以下の通りです。

/* 兄弟要素の順番を取得 */
.item {
  --idx: sibling-index();
}

/* 兄弟要素の総数を取得 */
.parent {
  --total: sibling-count();
}

これらの値はカスタムプロパティに格納して使用するのが定番です。また、疑似要素や「content」プロパティで数値を表示することも可能です。

具体的なレイアウト例

それでは、実際にどのようなレイアウトが実現できるのか、いくつか例を見てみましょう。

1. 要素数に応じてグリッドの列数を変える

兄弟要素の数に応じて1列・2列・3列と自動的に切り替えるレイアウトは、メディアクエリなしで実現できます。

.container {
  --count: sibling-count();
  display: grid;
  grid-template-columns: repeat(var(--count), 1fr);
}

これにより、子要素の数が増えても自動的に列数が増える、柔軟なグリッドが作れます。カードの一覧などで有効です。

2. 要素の位置に応じて角度や色を変える

「sibling-index()」を使って、各要素に連続的な変化を与えることもできます。例えば、扇形のメニューや時計のようなレイアウトをCSSだけで実現できます。

.item {
  --idx: sibling-index();
  transform: rotate(calc(var(--idx) * 30deg));
}

さらに「sibling-count()」と組み合わせれば、総数に応じて角度を等分することも可能です。

.item {
  --idx: sibling-index();
  --total: sibling-count();
  transform: rotate(calc(var(--idx) / var(--total) * 360deg));
}

これは「コンテキストリング」のようなUIを作るときに非常に便利です。

3. ユーザーインターフェースへの応用

フォームの入力欄やタブなどで、要素数に応じて幅を調整するといった使い方もあります。例えば、タブバーでタブの数に応じて幅を均等にしたい場合は、次のように書けます。

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

タブが増減しても自動的に幅が調整されるため、メンテナンスが楽になります。

ブラウザサポートと今後の展望

執筆時点（2025年時点）では、「sibling-index()」と「sibling-count()」は一部のブラウザでしかサポートされておらず、仕様も策定中です。具体的には、ChromeやEdgeではフラグ付きで試験実装されており、FirefoxやSafariではまだ実装されていません。そのため、本番サイトで使用する際は、フォールバックを用意するなどの配慮が必要です。

とはいえ、これらの関数はCSSの表現力を大きく広げる可能性を秘めています。特に、JavaScriptを使わずに動的なレイアウトを実現できる点は、今後のWebデザインに大きな影響を与えるでしょう。

まとめ

「sibling-index()」と「sibling-count()」は、兄弟要素の順番と総数をCSSだけで扱えるようにする革新的な関数です。これを使えば、要素数に応じたグリッドや、位置に応じたスタイルの変更を、より直感的に記述できます。

まだ実用的な段階ではありませんが、将来のCSSの標準として期待されています。新しい技術に触れることで、これまでのCSSの常識にとらわれない柔軟な発想が生まれるかもしれません。ぜひ一度、仕様をチェックしてみてください。