No Necesitas JS Para Eso
English
12 · Sibling functions

Sibling functions

Posición y total de hermanos en CSS puro

Chrome 135+ · experimental
← Índice

sibling-index()

Devuelve la posición (1-based) del elemento entre sus hermanos. Acá cada item retrasa su animación según su posición.

1
2
3
4
5

transition-delay: calc(sibling-index() * 0.1s)

sibling-count()

Devuelve el total de hermanos. Útil para repartir espacio proporcionalmente sin saber cuántos hay.

A
B
C
D

width: calc(100% / sibling-count())

Sin JS

Antes necesitabas :nth-child() por cada item o un loop en el template para los delays. Ahora CSS calcula solo.

css
/* 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
  );
}

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.