# sibling-index() and sibling-count()

Estado: Baseline 2026 (Chrome 138, Safari 26.2, Firefox 154 en agosto de 2026).  
Fuente: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154 and https://webkit.org/blog/17640/webkit-features-for-safari-26-2/  
Página: https://designforai.dev/es/css/sibling-index

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`.

## HTML

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

## CSS

```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; }
}
```

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

## 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.