saw someone trying to rebuild nth-child using the new if() syntax and it's kind of wild. the whole idea is to use variables like -A and -B so you don't have to hardcode everything into your selectors.
> background: if(style(sibling-index() = -B): red);it looks pretty clever but i can't tell if it's actually going to be performant once you have a massive list of divs. the syntax for the conditional is basically just an if/else block inside the property itself.
.container { --A: 5; --B: 8;}it's definitely more flexible than the old way, but i'm skeptical about how much browser support we'll actually get for sibling-index() anytime soon. seems like a lot of overkill for just changing a background color. anyone tried running this in a real production build yet?
link:
https://css-tricks.com/re-implementing-nth-child-with-modern-css/