v138 · css

CSS sibling-index() and sibling-count()

sibling-index() and sibling-count() can be used as integers in CSS property values to style elements based on their position among its siblings, or the total number of siblings respectively. These functions can be used directly as integer values, but more interestingly inside calc() expressions. Example: li { margin-left: calc(10px * sibling-index());

concepts

  1. sibling-index / count

    sibling-index() / sibling-count() expose an element's position in CSS, enabling staggered animations and per-child theming without JS or :nth-child counting.

  2. CSS-only data viz

    Polar and bar charts where width, hue, and angle are all expressed as calc(sibling-index() / sibling-count()). No measurement step in JS. Add and remove items and the charts re-draw themselves.

  3. Stagger orchestra

    Four choreographies on one stage — pin-fall, rainbow chord, radial fan, numbered card grid — all driven by sibling-index() and sibling-count(). Add or remove items and every animation, hue, angle, and counter re-balances itself.

  4. 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. The same formula drives the staggered animation-delay. No JavaScript color computation, no CSS preprocessor loops.

  5. Timeline chart

    A CSS-only colour-coded Gantt chart: each track's hue is hsl(calc(sibling-index() / sibling-count() * 240deg) …). Add or remove tasks and the colour wheel re-balances — three project presets included.

  6. Responsive nav

    A navigation bar whose padding, font-size, and icon scale shrink as more items are added — driven entirely by sibling-count() in calc(). Before/after comparison with a fixed-style nav shows the difference at 8 items.

why it shipped

From the explainer:

references