Can you think of a good use case for an css-only if/else like this?
So, Lea Verou put out a tweet looking at a pretty cool way to make an if/else with CSS-only, for styling things, and I was going to do a video on it... but I want to find a good use case, and I'm having trouble, so I'm open to any and all suggestions!
This is the basics of it:
This sets the font-size for my headings to
And it's basically the same (the nested version would also get inputs and buttons, but whatever, that's easy enough to also do).
I was thinking that this would be more useful to target things within a specific component, like this:
The thing is, this won't select all the other children inside of the card, it will select everything that isn't
We can solve that by changing the not selector to this:
Here is a codepen with the example from above in action if you want to play with it: https://codepen.io/kevinpowell/pen/abxdExV
This is the basics of it:
This sets the font-size for my headings to
700, and everything else to 300. But there's no point in doing this, because I could do this instead and it's a lot simpler.And it's basically the same (the nested version would also get inputs and buttons, but whatever, that's easy enough to also do).
I was thinking that this would be more useful to target things within a specific component, like this:
The thing is, this won't select all the other children inside of the card, it will select everything that isn't
.card .card-header or .card .card-footer, so even the html, body, etc...We can solve that by changing the not selector to this:
.card > :not(&)... but at that point, it feels a little combersome... so, any ideas?Here is a codepen with the example from above in action if you want to play with it: https://codepen.io/kevinpowell/pen/abxdExV
