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
700300And 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.card .card-footerhtmlbodyWe can solve that by changing the not selector to this:
.card > :not(&)Here is a codepen with the example from above in action if you want to play with it: https://codepen.io/kevinpowell/pen/abxdExV
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
