sibling-count() and sibling-index()
The sibling-count() and sibling-index() CSS functions return integers that are useful to style elements based on their positions among siblings or on the number of siblings, for example as part of a calc() expression. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The sibling-count() and sibling-index() CSS functions return integers that are useful to style elements based on their positions among siblings or on the number of siblings, for example as part of a calc() expression. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
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.
Related links
Powered by web-features