demo · v138

sibling-index() / sibling-count()

Add or remove rows. Hue and indent come from sibling-index() and sibling-count() — no JS reads the index, no :nth-child rules per item. The browser computes both at style time.

checking support…
5 rows

the code

li {
  --i: sibling-index();
  --n: sibling-count();
  background: hsl(calc(220deg - (var(--i) - 1) * (220deg / max(var(--n), 1))) 70% 35%);
  transform: translateX(calc((sibling-index() - 1) * 8px));
}

see also