v138 · css

Hue Ring Gallery

Items colored by sibling-index() / sibling-count() × 360° — a perfectly even hue wheel that self-redistributes whenever you add or remove an item. Same formula drives the staggered animation delay. No JavaScript color computation, no CSS preprocessor loops.

sibling-index() / sibling-count(): checking…

The CSS formula (no JS colour computation)

background: hsl(calc(sibling-index() / sibling-count() * 360deg) 70% 55%);
/* animation-delay also uses sibling-index() */ animation-delay: calc(sibling-index() / sibling-count() * 0.8s);

Stagger animation (sibling-index() delay) —

What makes this different from :nth-child(N): The old pattern required a CSS preprocessor or inline style to bake in a color for each specific position. sibling-index() and sibling-count() are live computed values, so adding a ninth item redistributes all nine hues automatically — the existing items shift their hue angle to keep the ring evenly spaced. No preprocessing, no re-render in JS, no layout queries.

references