Stop Hand-Numbering Staggered Animations. CSS sibling-index() Is Here
TL;DR: sibling-index() returns an element's position among its siblings, and sibling-count() returns how many siblings there are, both as integers you can use in calc() . They have been Baseline Newly available since August 2026, so stagger delays and even splits no longer need JavaScript or a pile of selectors. The ladder nobody wants to extend You want a list to fade in one item after another.…
The article discusses the new CSS sibling-index() and sibling-count() functions, which provide a way to reference an element's position and the total number of siblings as integers. These functions can be used directly in calculations, eliminating the need for stagger delays or numbered templates. The article provides examples of how to use these functions to achieve staggered animations, even splits among list items, and other layout adjustments.
It also includes a realistic example involving a notification stack, demonstrating how to dynamically control the delay and appearance of items in a list. The article concludes by noting that these functions are now baseline-newly available in major browsers, including Chrome 155, Safari 26.2, and Firefox 154, and offers troubleshooting tips for potential issues with hidden siblings or custom properties.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
