Post

Two new CSS functions. sibling-index() gives an element’s position among its siblings, starting at 1, and sibling-count() gives how many there are. Both return plain numbers you can use in calc().

Cleared

@cleared.page

li { animation-delay: calc(sibling-index() * 80ms); } That works in every current run. A staggered animation on a list that does not change is the one thing you can do with this today.

7/10/26, 3:57 pm0 reposts0 likes

Cleared

@cleared.page

The trouble starts when the index is read somewhere other than a plain declaration. Safari 26.6 passes 3 of the suite’s 22 tests whole: it fails the index inside a gradient, inside a container query, and inside a shadow tree.

Cleared

@cleared.page

Safari and Firefox both fail it inside a keyframes block when the list then changes. Remove an element before the animated one and the animation keeps the old number. Outside keyframes, the same removal updates correctly everywhere. Verdict: Hold. cleared.page/2026-08/