12 · Sibling functions
Sibling functions
Position and total of siblings in pure CSS
sibling-index()
Returns the element's position (1-based) among its siblings. Here each item delays its animation based on its position.
1
2
3
4
5
transition-delay: calc(sibling-index() * 0.1s)
sibling-count()
Returns the total number of siblings. Useful for distributing space proportionally without knowing how many there are.
width: calc(100% / sibling-count())
No JS
Before you needed :nth-child() per item or a template loop for delays. Now CSS calculates it itself.
/* stagger según la posición entre hermanos */
.sib-item {
transition: opacity .3s ease, transform .3s ease;
transition-delay: calc(sibling-index() * .1s);
}
@starting-style {
.sib-item { opacity: 0; transform: translateX(-12px); }
}
/* repartir espacio proporcionalmente */
.sib-bar {
width: calc(100% / sibling-count());
transition-delay: calc(
sibling-index() / sibling-count() * .4s
);
}An honest note on support
Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".