Advanced Tree Counting: Mathematical Layouts With `sibling-index()` And `sibling-count()`

Durgesh Pawar May 21, 2026 0 comments Advanced Tree Counting: Mathematical Layouts With sibling-index() And sibling-count() 11 min read CSS , Coding , Techniques Share on Twitter ,  LinkedIn About The Author Durgesh Rajubhai Pawar is a freelance developer dedicated to building high-performance, accessible web applications. He specializes in orchestrating complex … More about Durgesh ↬ Email Newsletter Your (smashing) email Weekly tips on front-end & UX . Trusted by 182,000+ folks. See User Testing Live Celebrating 10 million developers Custom Web Forms for Angular, React, & Vue. Your backend. Design Patterns For AI Interfaces, 30 lessons + UX training Design Patterns For Complex UIs and Enterprise UX with Vitaly Friedman Accessible Frontend Patterns with Manuel Matuzović SmashingConf Freiburg 2026 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. You know that thing where you have a grid of cards, and you want them to fade in one after another? That staggered cascade effect. Looks great. Should be simple. And yet every time I’ve built it, the implementation has made me feel like I’m doing something fundamentally stupid. See the Pen [Dynamic Staggered Animations with CSS sibling-index() [forked]](https://codepen.io/smashingmag/pen/zxowBog) by Durgesh . See the Pen Dynamic Staggered Animations with CSS sibling-index() [forked] by Durgesh . Because the options were always the same. Say you want staggered animation delays on a list of 10 items. You either wrote a Sass loop that spat out a dozen :nth-child() rules, each one hardcoding a --index variable for that specific position: /* One rule per item. Hope the list never grows. */ li:nth-child(1) { --idx: 1; } li:nth-child(2) { --idx: 2; } li:nth-child(3) { --idx: 3; } /* ... eight more of these ... */ li:nth-child(10) { --idx: 10; } li { animation-delay: calc(var(--idx) * 100ms);