Replacing React code with CSS :has selector
Since the dawn of time… okay, since the beginning of CSS at least, we have been taught that CSS is cascading. It's literally in the name, they are Cascading Style Sheets. Via CSS, an element can target an element inside of it, then an element inside, etc. But never, ever in the reverse order. An element can not apply styles to a parent element by any means other than via JavaScript.
The CSS :has selector is now supported by all major browsers, and with it, we actually can now target parent elements. And more! The world, indeed, is turned upside down. If you, like me, started your dev career in those blessed times when we were doing round corners on elements via transparent GIFs, the possibilities today will blow your mind.
So, other than being a cool new toy, what practical use does it actually have in the React world? Let's take a look at three very exciting ones.
This changes the background of a .card element inside a .content element to light grey and adds margins to images inside. So that it's visually separated from the text.
