sibling-index()
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-index()CSSfunction 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 returning1 and the last child, returning thelength ofElement.children.
Note:Like the:nth-child() pseudo-class,sibling-index() starts from 1, not 0.
Note:Thecounter() function provides a similar result but it returns a<string> (which is more suitable forgenerated content, whilesibling-index() returns an<integer> (which can be used for calculations).
Try it
--width: calc(sibling-index() * 30px);--width: calc(sibling-index() * 20px);--width: calc(sibling-index() * 10px);--width: 100px;<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li></ul>#example-element { list-style-type: none; padding: 0; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;}#example-element > li { text-align: center; padding: 2px; border-radius: 8px; width: var(--width, calc(sibling-index() * 30px)); color: white; background-color: hsl( calc(360deg / sibling-count() * sibling-index()) 50% 50% );}Syntax
sibling-index()Parameters
Thesibling-index() function doesn't accept parameters.
Return value
An integer; the position of the current element in the DOM tree's sibling order.
Examples
Dynamic list width
This example demonstrates how to dynamically increase the width of each<li> item in the<ul> by50px.
HTML
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li></ul>CSS
li { width: calc(sibling-index() * 50px); background-color: #ffaaaa;}Results
Sequential animations
Combiningsibling-index() with CSS animations opens new possibilities. In this example, the opacity of elements in sequential order by setting ananimation-delay based on their order in the DOM.
HTML
We include a container element with four children:
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li></ul>CSS
We apply thefade-in animation to each element. We use thesibling-index() function within acalc() function to set the duration of theanimation-delay based on the source element's position in the source order. Theanimation-fill-mode applies the animation's0% keyframe until theanimation-duration expires.
ul { list-style-type: none; padding: 0; margin: 0;}li { animation-name: fade-in; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: backwards; animation-delay: calc(1s * sibling-index());}@keyframes fade-in { from { opacity: 0; } to { opacity: 1; }}Results
Specifications
| Specification |
|---|
| CSS Values and Units Module Level 5 # funcdef-sibling-index |