sibling-index() and sibling-count()

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

Chrome 138Edge 138Safari 26.2Firefox 154

Funções numéricas que retornam a posição de um elemento (a partir de 1) entre os irmãos e a contagem total. Animações escalonadas, listas arco-íris e layouts radiais não precisam mais de variáveis `--i` inline nem de escadas 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: Itens sem suporte recebem os valores iniciais (sem escalonamento, fundo inválido); mantenha um fundo estático antes do calculado.

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

Prompt

Use `sibling-index()` e `sibling-count()` diretamente em calc() para atrasos escalonados (`animation-delay: calc(sibling-index() * 80ms)`), matizes distribuídos uniformemente e matemática de posição (veja fx-019), em vez de listas de regras `:nth-child(n)` ou `style="--i:n"` inline. Baseline desde o Firefox 154 (agosto de 2026); adicione uma declaração de fallback estática para navegadores mais antigos.