The new CSS pseudo-classes explained - :is() :where() :has()

I’m constantly rewatching to see if I can remember the difference bw :is and :has … :has is not forgiving like :is and :where … what else?

Can someone give me a useful example of :where?
It seems redundant, like we can just remove :where

f***in mozilla....

problem is I can't club :has() with :first-of-type(). Which means I can't apply style to the same element after checking if it has a child or not. Its so disappointing tbh

Excellent explanations 😊Thank you

Great overview. Really looking forward to using :has.

I think this is the best use-case of where and is pseudo-classes
```
.example-1:where(.link) :is(:focus, :hover) {
color:red;
}
```

I do not recommend it. despite being compatible with all browsers it does not have weight and scale. here an example. It is not painting yellow, despite being declared at the end of the style.

.container p{
background-color: green;
}

/* WHERE NO TIENE PESO Y ESCALA. NO RECOMENDABLE */
.container :where(p){
background-color: yellow; // NOT COLOR
}

the has selector will chage my life!! I don't know how many times I've eather repeated something like marigin: 1rem; or given it another selecter eaven when the css has basically been the same css

I watched this three months ago before I knew what any of this was... Now I've finally caught up and am putting these into action. Thanks!

very useful ~!

Now just need to wait a few years so we can use it reliably.

this is a game changer, im foolishly trying to create my own css framework and this has been useful for creating specific components of it

Great info - thanks. I wish I'd had those selectors (particularly :has()) years ago.

I needed that :has() pseudo-class. I encountered that before where I needed to select a parent based on its child

Can't wait until Firefox:has(support)! It's gonna be nice to be able to start using that more often. Anyone have an idea of when they plan on releasing that beyond experimental?

Hi Kevin, I am pretty excited with the :has selector. Quick question. Does it mean that we can actually use it to apply different templates based on what we are rendering inside? Do you find it a good idea? Great video man, and keep the camera on, it makes it all personal !

:has() does not work for me in safari and firefox... chrome and edge it is working... can you confirm

Firefox is really lacking behind. It still doesnt have support for :has

How many times over the last 20 years I pulled out my hair trying to find a way to select the parent? :)