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

11 min readCSS,

Coding,

TechniquesMeet 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; }