BASELINE 2026

sibling-index()

JavaScriptでカウントしなくても、何番目の要素かがCSSの数値になる。

CHECKING

HOW IT WORKS

:nth-child()は選ぶ。sibling-index()は計算する。

  • sibling-index()は兄弟の中の何番目か。1始まり。
  • sibling-count()は兄弟の総数。自分も含む。
  • 数えるのは要素だけ。テキストやコメントは入らない。
  • 表示用の番号ならcounter()。計算するならsibling-index()。
animation-delay: calc((sibling-index() - 1) * 80ms);
--t: calc((sibling-index() - 1) / (sibling-count() - 1));
width: calc(100% / sibling-count());

子を増やすと、高さと色が組み変わる。

6

タイルの数字はcounter()。高さと色はsibling-index() / sibling-count()。

LIVE DEMOS

ホバーすると、順番に動く。

MOTION · HOVER

スタッガー登場

transition-delay: calc((sibling-index() - 1) * 80ms);

MOTION · HOVER

波

translate: 0 calc(sin((sibling-index() - 1) * 28deg + var(--t)) * 16px);

MOTION · HOVER

順にフォーカス

ABCDE 
transition-delay: calc((sibling-index() - 1) * 70ms);

LAYOUT · HOVER

個数不明でも等幅

MonTueWedThuFri 
width: calc(100% / sibling-count());

LAYOUT · HOVER

階段バー

height: calc(sibling-index() * 14px);

LAYOUT · HOVER

アバター重なり

ABCDE 
translate: calc((sibling-index() - 1) * 34px);

COLOR · HOVER

虹色リスト

hsl(calc(360deg * sibling-index() / sibling-count()) 72% 58%)

UI · HOVER

通知スタック

Deployed New comment Review ready Build passed 
translate: 0 calc((sibling-index() - 1) * 38px);

UI · HOVER

扇形メニュー

--angle: calc(180deg * ((sibling-index() - 1) / (sibling-count() - 1)));