`sibling-count()` CSS function

Baseline Newly available

This feature works across the latest devices and browser versions. This feature might not work in older devices or browser versions. It's been available across browsers since August 2026.

The sibling-count() CSS function returns an integer representing the total number of sibling DOM elements (direct children of the parent) of the element on which it is used, including itself.

Note: The counter() function provides a similar result but it returns a <string> (which is more suitable for generated content, while sibling-count() returns an <integer> (which can be used for calculations).

Syntax

sibling-count()

Parameters

The sibling-count() function doesn't accept parameters.

Return value

An integer; the total number of sibling DOM elements including the element itself.

Examples

Dynamic column count

This example demonstrates setting the width of each item in a list based on the number of items, enabling placing each child in its own column.

HTML

We include a <ul> container and several <li> elements children.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

We divide the width of each list item by the number of direct children the list contains. We also set every odd element to have a background-color to better demonstrate the resulting effect.

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
  display: flex;
}

li {
  width: calc(100% / sibling-count());
}

li:nth-of-type(odd) {
  background-color: rgb(0 0 0 / 0.05);
}

Results

Specifications

Specification
CSS Values and Units Module Level 5 # funcdef-sibling-count

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`sibling-count`	138	138	154	122	26.2	138	154	91	26.2	30.0	138	26.2