demo · v133

sibling-index() & sibling-count()

CSS now knows where a child sits among its siblings. Stagger animations, build ladder charts, or run any calc-driven layout — no per-child JS, no --index custom property bookkeeping.

8

animation-delay: calc(sibling-index() * 60ms)

height: calc(8px + (sibling-index() * 6px))

checking support…

the CSS

.item {
  animation: slidein 600ms forwards;
  animation-delay: calc(sibling-index() * 60ms);
}
.bar { height: calc(8px + sibling-index() * 6px); }

see also