Smiley Face

unknown

CSS is gaining two new built-in functions — sibling-index() and sibling-count() — that let stylesheets know an element's position within its siblings and the total sibling count. This enables JavaScript-free staggered animations (by calculating animation-delay dynamically per element), dynamic color gradients across a list (using OKLCH with a computed progress value), and even complex 3D carousel layouts using trigonometry. The feature eliminates the need for hardcoded nth-child rules or JS loops for position-based styling. Browser support is currently limited and not yet available in Firefox.

CSS Can Count Elements Now

SeyoungCho

Ah, what a massive relief! 😭 Every frontend developer who has ever spent hours hardcoding <code>:nth-child(1)</code>, <code>:nth-child(2)</code>, <code>:nth-child(3)</code> just to get staggered animation delays knows this pain all too well.
Finally seeing <code>sibling-index()</code> and <code>sibling-count()</code> become native built-in functions feels like a huge win for cleaner stylesheets. No more writing repetitive boilerplate lines or injecting extra JavaScript just to calculate an element’s position among its siblings.

Thanks for sharing, def gonna use this.

but it doesn’t have good support yet.