<sibling-count>

A new experimental function that returns the total number of siblings an element has. This allows you to style elements based on how many items are currently in a list without using JavaScript.

Quick example

.grid-item {
  /* Make items larger if there are only a few in the list */
  width: calc(100% / sibling-count());
}

<sibling-count> Browser Support

Newly availableSince 202670% global usage

Since 2026 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Works in all modern browsers. May need a fallback for older browsers.

138+
154+
26.2+
138+
ESC