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

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

Numeric functions that return an element's 1-based position among its siblings and the total count. Staggered animations, rainbow lists and radial layouts no longer need inline `--i` variables or `:nth-child` ladders.

## 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: Items without support get the initial values (no stagger, invalid background); keep a static background before the computed one.

## Prompt

Use `sibling-index()` and `sibling-count()` directly in calc() for staggered delays (`animation-delay: calc(sibling-index() * 80ms)`), evenly distributed hues, and position math (see fx-019), instead of `:nth-child(n)` rule lists or inline `style="--i:n"`. Baseline since Firefox 154 (August 2026); add a static fallback declaration for older browsers.