{
  "$type": "site.standard.document",
  "description": "Elements can now know which position they are in the DOM tree (index) and how many other elements there are in total (count).",
  "path": "/sibling-index",
  "publishedAt": "2025-03-11T00:08:03.309Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "css"
  ],
  "textContent": "2019, I proposed an idea to help remove a ton of boilerplate code from CSS and HTML while also making stagger effects easier on authors. The proposal ended up being sibling-index() and sibling-count() . Fun news ! You can try it in Canary today and I've got this little example to help kick off some ideas for you! Try on Codepen Staggering animation # Instead of inlining a CSS variable for each element: < div class = \"parent\" style = \"--sibling-count: 5\" > < div style = \"--sibling-index: 1\" ></ div > < div style = \"--sibling-index: 2\" ></ div > < div style = \"--sibling-index: 3\" ></ div > < div style = \"--sibling-index: 4\" ></ div > < div style = \"--sibling-index: 5\" ></ div > </ div > You can use sibling-index() to retrieve it just in time instead of doing the work in the template or JS. Clean that HTML up to make room for sibling-index() by removing all the inline styles: < div class = \"parent\" > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > </ div > and then drop in this new magic bomb: .parent > * { transition : opacity 0.3 s ease ; transition-delay : calc (sibling-index() * 100 ms ); } and now you have a 100ms staggered crossfade transition effect 🤓 Staggering color # There's nothing stopping you from using sibling-index() to stagger a color change, or anything else! Here the hue increments by 50 each element. .parent > * { --hue : calc (sibling-index() * 50 ); color : oklch (70 % 70 % var (--hue)) ; } You could easily add a min() or clamp() or trig functions to help you too. Time to experiment # Share with me what you build! Fork this Codepen",
  "title": "Let the stagger experiments begin"
}