sibling-count() CSS function
Baseline
2026
Newly available
Since August 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Want more browser support for this feature? Tell us why.
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 |