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
Loading…