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: no.
Supported in Safari: yes.
This feature is not Baseline because it does not work in some of the most widely-used 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.