Re: [csswg-drafts] [css-values] Proposal: add sibling-count() and sibling-index() (#4559)

Tacking onto the thread here as we were discussing elsewhere. To echo some of what @bramus has said 😁 

I've always thought a rad usage of custom properties would be inside the pseudio-selector too. It would perhaps negate some uses of looping where we create loops for `nth-of-type`, but what we really want is scoped values inside scoped selectors. This is where `sibling-index` would be rad.

```css
.element:nth-of-type(sibling-index()) {
  animation-delay: calc(sibling-index() * 0.1s);
}
```

Or something along those lines.

Something like `.element:nth-child(var(--index-to-do-awesome-stuff-with))` has been a dream for some time and in some cases would actually negate the need for loops where people use a loop to make stuff. 

It's like another example of bringing SASS features onto the web platform where we can enhance that DX whilst discovering new powerful use cases. Variables became custom properties which are infinitely better because they can be used at runtime. But, runtime properties in pseudo selectors could be one of those magical things that negates the need for loops as people see wild ways to use it. Imagine an @property stepped index animation that updates the nth-type selector index for example 🤯

Just air thinknig here 😅 

I'll put together some demo use cases where I could see ways that these features could tackle without preprocessor interventions or hundreds of lines of preprocessed code 😅 

             ✨
ʕ •ᴥ•ʔ／

-- 
GitHub Notification of comment by jh3y
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4559#issuecomment-1126121507 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 13 May 2022 14:28:32 UTC