El Problema de las Animaciones Escalonadas (y Todo lo Demás)

¿Conoces esa sensación? Tienes una cuadrícula de tarjetas, una lista de elementos, un conjunto de pestañas. Quieres que aparezcan uno tras otro, o que se distribuyan uniformemente, o que formen un círculo. Cada vez, terminas escribiendo una docena de reglas :nth-child() o haciendo un bucle en JavaScript para establecer variables --index en línea.

/* La forma antigua: una regla por elemento */
li:nth-child(1) { --idx: 1; }
li:nth-child(2) { --idx: 2; }
/* ... nueve más ... */
li {
  animation-delay: calc(var(--idx) * 100ms);
}

Diez elementos, diez reglas. ¿Cincuenta elementos? O los limitas o generas cientos de selectores en el build. JavaScript funciona, pero dispersa las preocupaciones de diseño por tus scripts y se rompe silenciosamente cuando alguien refactoriza el componente.

El navegador ya sabe qué elemento es el tercer hijo. Construyó el árbol DOM. CSS simplemente no podía acceder a esa información — hasta ahora.

Basado en el artículo original de Smashing Magazine, aquí tienes todo lo que necesitas saber sobre las nuevas funciones CSS de conteo de hermanos.

Developer writing CSS with sibling-index function for staggered animation layout on laptop System Abstract Visual

Cómo Funcionan sibling-index() y sibling-count()

sibling-index() devuelve la posición (base 1) de un elemento entre los hijos de su padre. El primer hijo devuelve 1, el quinto hijo devuelve 5. sibling-count() devuelve el número total de hijos elemento que tiene el padre.

Ambas funciones se resuelven en un número real, no una cadena. Eso significa que puedes usarlas en calc(), min(), max(), round() e incluso funciones trigonométricas como sin() y cos().

/* Animación escalonada en una línea */
li {
  animation-delay: calc(sibling-index() * 100ms);
}

/* Escalonamiento inverso: el último elemento anima primero */
.card {
  animation: fade-in 0.4s ease both;
  animation-delay: calc((sibling-count() - sibling-index()) * 80ms);
}

/* Anchuras iguales automáticas */
.tab {
  width: calc(100% / sibling-count());
}

Esto es fundamentalmente diferente de :nth-child(), que es un selector. :nth-child() selecciona elementos — no produce un valor para que calcules. sibling-index() se sienta dentro de tus declaraciones y te da un número. Resuelven problemas diferentes.

CSS code editor showing sibling-count and calc for automatic equal width tabs Developer Related Image

Patrones Prácticos y Trampas

Menús Circulares

.radial-item {
  --angle: calc((360deg / sibling-count()) * sibling-index());
  --radius: 120px;
  position: absolute;
  left: calc(50% + var(--radius) * cos(var(--angle)));
  top: calc(50% + var(--radius) * sin(var(--angle)));
  transform: rotate(calc(var(--angle) * -1));
}

¿Seis elementos? Hexágono. ¿Ocho? Octágono. Agrega o quita elementos y el diseño se recalcula. Sin JavaScript calculando coordenadas.

Distribución de Tono

.swatch {
  background-color: hsl(
    calc((360deg / sibling-count()) * sibling-index()) 70% 50%
  );
}

Tres elementos reciben tonos separados por 120°. Doce elementos reciben incrementos de 30°. La paleta se adapta a lo que sea que esté en el DOM.

Las Trampas que Debes Conocer

  • Ámbito del Shadow DOM: Estas funciones operan en el árbol DOM, no en el árbol visual aplanado. Dentro de una shadow root, solo ven los hijos del árbol shadow. El contenido proyectado a través de <slot> es invisible.
  • display: none todavía cuenta: Los elementos ocultos aún están en el DOM, por lo que sibling-index() los incluye. Para filtros de búsqueda o visibilidad dinámica, necesitas eliminar los nodos o usar JavaScript.
  • Los pseudo-elementos no cuentan: ::before y ::after no son hermanos. Pero puedes usar estas funciones dentro de declaraciones de pseudo-elementos — evalúan contra el elemento de origen.
  • Las propiedades personalizadas se evalúan inmediatamente: Si estableces --idx: sibling-index() en un padre, se resuelve en el índice del padre. Cada hijo hereda ese único valor fijo. Aplica la función directamente en los elementos que la necesitan.

Desktop setup with multiple monitors displaying CSS grid and radial menu using sibling-index Algorithm Concept Visual

Soporte y Mejora Progresiva

A mediados de 2025, Chrome/Edge 138 y Safari 26.2 ya envían estas funciones. Firefox está trabajando en ello (rastreado en Bugzilla #1953973). Chrome y Safari juntos cubren aproximadamente el 75-80% del tráfico global.

Para producción hoy, usa @supports:

/* Base: funciona en todas partes */
.item {
  width: 25%;
  animation-delay: 0ms;
}

/* Mejora progresiva */
@supports (z-index: sibling-index()) {
  .item {
    width: calc(100% / sibling-count());
    animation-delay: calc(sibling-index() * 80ms);
  }
}

Rendimiento a Escala

Cambiar el DOM desencadena un recálculo de estilo para los hermanos afectados. Para UI normal (navegación, cuadrículas, pestañas), nunca lo notarás. Pero para un feed de scroll infinito con miles de nodos cambiando constantemente, sigue usando índices gestionados por JavaScript dentro de tu ventana de virtualización.

Lo Que Viene

El CSSWG ha discutido un argumento of (como :nth-child() ya soporta) para contar solo hermanos que coinciden con un selector específico. También se habla de funciones children-count() y descendant-count() para diseños orientados por el padre.

Nota de Accesibilidad

Estas funciones son puramente visuales. Si usas sibling-index() para reordenar visualmente una lista, un lector de pantalla aún lee el DOM en el orden de origen. Para componentes interactivos, todavía necesitas JavaScript para sincronizar los atributos ARIA (aria-posinset, aria-setsize).

Limitaciones y Precauciones

  • Sin soporte en Firefox todavía: Necesitas un fallback para ~20% de los usuarios.
  • display: none rompe el conteo secuencial: Para menús radiales o anchuras proporcionales con filtrado dinámico, considera eliminar nodos del DOM en lugar de ocultarlos.
  • Aislamiento del Shadow DOM: Los autores de web components deben ser conscientes de las limitaciones de ámbito.

Próximos Pasos

Lectura complementaria: Para una inmersión más profunda en la minimización de costos de runtime en IA de juegos, echa un vistazo a nuestro análisis sobre agentes de código vs llamada de herramientas.

Este contenido fue redactado con la asistencia de herramientas de IA, basándose en fuentes confiables, y fue revisado por nuestro equipo editorial antes de su publicación. No reemplaza el asesoramiento de un profesional especializado.