sibling-index() and sibling-count()

Baseline 2026 (Chrome 138, Safari 26.2, Firefox 154 im August 2026).

Chrome 138Edge 138Safari 26.2Firefox 154

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.

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

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

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.