files/en-us/web/css/reference/values/sibling-count/index.md
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 {{CSSxRef("counter()")}} function provides a similar result but it returns a
<string>(which is more suitable for generated content, whilesibling-count()returns an<integer>(which can be used for calculations).
sibling-count()
The sibling-count() function doesn't accept parameters.
An integer; the total number of sibling DOM elements including the element itself.
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.
We include a {{htmlelement("ul")}} container and several {{htmlelement("li")}} elements children.
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
We divide the {{CSSxRef("width")}} of each list item by the number of direct children the list contains. We also set every odd element to have a {{CSSxRef("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);
}
{{EmbedLiveSample("Dynamic column count", "300", "80")}}
{{Specifications}}
{{Compat}}