css function
`sibling-count()` CSS function
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, whilesibling-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);
}