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

Status: Baseline 2026 (Chrome 138, Safari 26.2, Firefox 154 im August 2026).  
Quelle: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154 and https://webkit.org/blog/17640/webkit-features-for-safari-26-2/  
Seite: https://designforai.dev/de/css/sibling-index

Numerische Funktionen, die die 1-basierte Position eines Elements unter seinen Geschwistern und die Gesamtzahl zurückgeben. Gestaffelte Animationen, Regenbogenlisten und radiale Layouts brauchen keine inline `--i`-Variablen oder `:nth-child`-Leitern mehr.

## 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: Elemente ohne Unterstützung bekommen die Initialwerte (keine Staffelung, ungültiger Hintergrund); behalte einen statischen Hintergrund vor dem berechneten.

## Prompt

Nutze `sibling-index()` und `sibling-count()` direkt in calc() für gestaffelte Verzögerungen (`animation-delay: calc(sibling-index() * 80ms)`), gleichmäßig verteilte Farbtöne und Positionsmathe (siehe fx-019), statt `:nth-child(n)`-Regellisten oder inline `style="--i:n"`. Baseline seit Firefox 154 (August 2026); ergänze eine statische Fallback-Deklaration für ältere Browser.