sibling-count() and sibling-index()
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).
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 138 | 138 | | 26.2 | 138 | 26.2 | |
| Other | ||||||
| The sibling-index() CSS function returns an integer representing the position of the current element in the DOM tree relative to all its sibling elements. The returned value is the index number of the contextual child's position among all the sibling elements within a parent element, with the first child returning 1 and the last child, returning the length… | 138 | 138 | | 26.2 | 138 | 26.2 |
Syntax
.item {
width: calc(100% / sibling-count());
animation-delay: calc(sibling-index() * 0.1s);
}Live demo
Use cases
-
Use sibling-count() and sibling-index()
Use sibling-count() and sibling-index() when the default CSS behavior is not expressive enough for the component or layout you are building.
-
Handle edge cases
Apply sibling-count() and sibling-index() to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test sibling-count() and sibling-index() in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using sibling-count() and sibling-index() does not make content harder to perceive, understand, or operate in assistive contexts.