Understanding CSS :has()

Eric Meyer takes a look at the new CSS :has() pseudo class and explores a number of ways it can be used to supercharge your CSS.

NOTE: There is an error at 10:14. To match the behavior Eric describes,
:has(:not(img)) should actually be :not(:has(img)), but it was typed
into the slide wrong. Thanks to Benjamin Aster for catching the flub!

[BenjaminAster]

Little mistake in 10:14: The selector should be :not(:has(img)) instead of :has(:not(img)).

[Pinovski]

very good. Just one thing, where I can learn about those operators... ~, +, *, that youre using sometimes?

[denvirkeligeagi]

Great illustration of the feature! While it's definitely powerful, it also makes for some quite convoluted, hard-to-understand selectors, as some of your examples show.
Also, isn't selecting on generic divs (with no CSS classes) considered bad practice?

[chezchezchezchez]

Nice dude, but you need to work on fixing your audio. All those noises you’re making with your mouth need to be filtered out.

You’re swallowing your sucking your lips, you’re doing all kinds of stuff with your mouth it’s pretty disgusting when it’s in a video. There’s all kinds of tutorials on how to clean that crap up.