Study · CSS · Patterns

Counting siblings in CSS

Use sibling position and count to space a repeated pattern.

sibling-index() returns an item's one-based position; sibling-count() returns how many items share its parent. Together they place each bar along a wave. Its height, opacity and vertical offset follow that position. Add or remove bars to see the wave redistribute without assigning an index by hand.

15 siblings

Amplitude Phase

--angle: calc((sibling-index() - 1) / sibling-count() * 360deg + var(--phase));
height: calc(22px + (sin(var(--angle)) + 1) / 2 * var(--amplitude));

CSS support could not be checked. The default sibling list remains visible.

Amplitude changes the wave’s height; phase shifts it along the row. Where the sibling functions are unavailable, a small JavaScript fallback supplies the same offsets.

Content that sizes itself

Querying a component state

Navigation that follows the scroll

Anchored content that knows when to hide

Branching and progress in CSS

Counting siblings in CSS

Randomness in CSS

A stateful scroll surface

Typed HTML attributes in CSS

Layout primitives in CSS

Colour relationships in CSS

Styling a native select

Shapes and CSS functions

Placement and scoped transitions

A colour axis with contrast

Geometry with CSS

Shaping corners with superellipses

Theme

Counting siblings in CSS