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 anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
Thesibling-count()CSSfunction 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:Thecounter() function provides a similar result but it returns a<string> (which is more suitable forgenerated content, whilesibling-count() returns an<integer> (which can be used for calculations).
Syntax
sibling-count()Parameters
Thesibling-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 thewidth of each list item by the number of direct children the list contains. We also set every odd element to have abackground-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 |