W3cubDocs

/CSS

sibling-count()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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>, 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	No	122	No	138	No	91	No	No	138	No