demo · v133

Staggered reveal & zebra rows

Two use cases for sibling-index() beyond the explainer: a grid that ripples in with per-item animation delays, and a data table that stripes itself via mod(sibling-index(), 2) — no :nth-child(even).

    data table with zebra stripes (no nth-child)

    1. 1Row one$42.10
    2. 2Row two$11.92
    3. 3Row three$78.04
    4. 4Row four$3.41
    5. 5Row five$129.55
    6. 6Row six$8.17

    the rules

    .reveal li {
  animation-delay: calc(50ms * (sibling-index() - 1));
}
.reveal.reverse li {
  animation-delay: calc(50ms * (sibling-count() - sibling-index()));
}
.zebra li > span {
  background: hsl(0 0% calc(98% - 2% * mod(sibling-index() - 1, 2)));
}

    Stagger and zebra both used to require either a JS frontend setting --i custom properties on each item, or one CSS rule per index. With sibling-index() a single rule scales from 6 items to 600.

    see also