sibling-index() and sibling-count()

Baseline 2026 (Chrome 138, Safari 26.2, Firefox 154 en agosto de 2026).

Chrome 138Edge 138Safari 26.2Firefox 154

Funciones numéricas que devuelven la posición de un elemento (empezando en 1) entre sus hermanos y el total. Las animaciones escalonadas, las listas arcoíris y los layouts radiales ya no necesitan variables `--i` en línea ni escaleras de `:nth-child`.

One
Two
Three
Four
Five

CSS

.fx-034{list-style:none;padding:0;font-family:system-ui;display:grid;gap:6px;max-width:240px}
.fx-034 li{
  padding:8px 12px;border-radius:6px;color:#fff;
  background:oklch(.6 .18 calc(sibling-index() * 360deg / sibling-count()));
  animation:fx-034-in .4s both;animation-delay:calc(sibling-index() * 80ms);
}
@keyframes fx-034-in{from{opacity:0;translate:-12px 0}}
@media (prefers-reduced-motion: reduce) {
  .fx-034, .fx-034 * { animation: none; transition: none; }
}

HTML

<ul class="fx-034"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li></ul>

Fallback: Los elementos sin soporte reciben los valores iniciales (sin escalonado, fondo inválido); conserva un fondo estático antes del calculado.

Fuente: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154 and https://webkit.org/blog/17640/webkit-features-for-safari-26-2/

Prompt

Usa `sibling-index()` y `sibling-count()` directamente en calc() para retardos escalonados (`animation-delay: calc(sibling-index() * 80ms)`), tonos distribuidos uniformemente y cálculo de posiciones (ver fx-019), en lugar de listas de reglas `:nth-child(n)` o `style="--i:n"` en línea. Baseline desde Firefox 154 (agosto de 2026); añade una declaración estática de respaldo para navegadores antiguos.