<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.
Syntax
/* Usage Example */
.list-item {
/* Staggers the animation delay based on the item's position */
animation-delay: calc(sibling-index() * 100ms);
}<sibling-index> Browser support
Limited availability
Since
2020 70% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
138+
26.2+
138+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more