v133 · 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()

    sibling-index() / sibling-count() in CSS — staggered animations without per-child JS.

  2. Staircase list & pie

    Add & remove rows live; an indented faded list and an N-slice pie reflow purely from sibling-index() / sibling-count() in calc().

  3. Staggered reveal & zebra rows

    Per-item animation-delay from sibling-index(), and zebra-striped table rows from mod(sibling-index(), 2) — without :nth-child.

  4. Color spectrum generator

    Add or remove list items; a full hue spectrum reflows automatically using calc(sibling-index() * 360 / sibling-count()) purely in CSS — no per-item style attributes, no JS counting. Switch between hue strip, size staircase, and bar chart modes.

  5. Fan Menu

    A radial fan menu where each item's angular position is calc((sibling-index() - 1) * arc / sibling-count()), and a cascading reveal list where width and stagger delay are fractions of the sibling count. Add or remove items; all positions, hue shifts, and timings reflow in CSS with no JS recalculation.

why it shipped

From the explainer:

references