You clicked 0 times. The light is broken!
You clicked 0 times. The light is broken!
You clicked 0 times. The light is broken!
sibling-count() and sibling-index()
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Since August 2026 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
With sibling-index and sibling-count, we can do visual changes to a UI based on the total number of siblings, or the index of the current sibling.
.item {
--size: 3rem;
--l: calc(3 * sibling-index());
background-color: hsl(from deeppink h s calc(l + var(--l)));
}Take a look at the demo below and resize the wrapper.