Meet `sibling-index()` and `sibling-count()`. Staggered cascade effect in one line of CSS without `:nth-child()` rules or JS workarounds. Works for 5 items or 5,000.

Smashing Magazine is a reputable publication that caters to web designers and developers, offering a  articles, tutorials, and resources to help them stay at the forefront of their craft. With a focus on practical, actionable insights, Smashing Magazine covers a wide range of topics, including frontend development, UX/UI design, performance optimization, and responsive web design. The platform also hosts conferences, workshops, and webinars, providing opportunities for professionals to network and further their skills. By following Smashing Magazine, developers can access resources to enhance their knowledge, skills, and career prospects in the rapidly evolving field of web development.

Smashing Magazine

CSS Values Level 5 introduces `sibling-index()` and `sibling-count()` — two new functions that return an element's position among its siblings and the total sibling count as integers. This eliminates the need for Sass-generated `:nth-child()` rules or JavaScript-injected inline styles for staggered animations, equal-width tabs, hue distribution, circular menus, and z-index stacking. The post covers practical patterns, key gotchas (Shadow DOM scoping, `display:none` still counting, custom property evaluation timing, performance at scale), browser support (Chrome/Edge 138 and Safari 26.2 shipped; Firefox in progress), `@supports` fallback strategy, and accessibility considerations around visual reordering vs. DOM order.

Advanced Tree Counting: Mathematical Layouts With sibling-index() And sibling-count() — Smashing Magazine

<pre><code>really useful functions, hopefully we<span class="hljs-comment">&#x27;ll see wider support soon</span>
</code></pre>
