demo · v133

Staircase list & rotated pie

Add & remove items live; the indent, the opacity gradient, and the pie-slice rotations are all derived from sibling-index() / sibling-count() inside calc().

current: —

indented + faded list

  1. row
  2. row
  3. row
  4. row

pie with N coloured slices — angle is sibling-index() × 360deg/sibling-count()

the CSS

.stair li {
  margin-left: calc(8px * (sibling-index() - 1));
  opacity: calc(1 - 0.4 * (sibling-index() - 1) / max(sibling-count() - 1, 1));
}
.pie .slice {
  transform: rotate(calc((sibling-index() - 1) * (360deg / sibling-count())));
}

Before sibling-index(), you'd write one nth-child(n) rule per child, or run a script that wrote --i custom properties onto each element. Neither scales.

see also