<sibling-index>
A new experimental function that returns the 1-based index of an element among its siblings. You can use it to create staggered animations or dynamic styles without nth-child(n) hacks.
Quick example
.list-item {
/* Staggers the animation delay based on the item's position */
animation-delay: calc(sibling-index() * 100ms);
}<sibling-index> Browser Support
Newly availableSince 202670% global usage
Since 2026 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
138+
154+
26.2+
138+