CSS is getting native tree-counting functions. The CSSWG has specified `sibling-index()` and `sibling-count()`, which let any element know its position among siblings and the total sibling count, eliminating the need to write stacked `:nth-child()` rules for staggered animations or mathematically driven layouts. No JavaScript. No hardcoded sequences. The value is available directly in CSS custom properties and `calc()`.
The current spec counts all siblings, but CSSWG issue #9572 documents a planned `of <selector>` argument, so `sibling-index(of .active)` would return only the position among matching siblings. An element that is the eighth child overall but the third `.active` child returns `3`. Separate proposals in issues #11068 and #11069 cover `children-count()` and `descendant-count()`, giving parent elements awareness of what is below them, not just peers.
The article is worth reading in full because it works through the actual math: how to map a sibling index to a delay value, how `sibling-count()` enables symmetrical effects, and where browser support currently stands. The spec is not finished, but the directional decisions being made now will define how CSS handles dynamic, data-driven layouts for years.
[READ ORIGINAL →]