sibling-index() & sibling-count()

Dynamic styling without nth-child selectors or custom properties

Dynamic Hue Distribution

Each swatch calculates its hue by dividing the color wheel by sibling-count(), then multiplying by its sibling-index()

Staggered Animations

Animation delay computed from position — no CSS variables needed per element

Radial Distribution

Menu items position themselves in a circle — rotation angle derived from index and count

Adaptive Step Indicator

Step widths and connector lines adjust automatically when steps are added or removed

✓
Account
✓
Profile
Settings
Review
Complete

Wave Loader

Classic loading pattern, but the delay math happens in CSS

Depth Stack

Cards compute their own z-index, scale, and offset from sibling position

Notification 1

First in queue

Notification 2

Second in queue

Notification 3

Third in queue

Notification 4

Fourth in queue

The Core Pattern

.item {
  /* Position in sequence (1-based) */
  --i: sibling-index();
  
  /* Total siblings */
  --n: sibling-count();
  
  /* Calculate from position */
  --hue: calc(360 / var(--n) * var(--i));
  --delay: calc(var(--i) * 0.1s);
  --angle: calc(360deg / var(--n) * var(--i));
}