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

Every time I mention :is() and :where() people tell me they’ve never seen them before, and with browser support being pretty good for them now (over 92%), I figured I should spread the word once again, and while I was at it, it seemed like a good time to talk about :has() as well (which is over 83% already!).

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:37 - :is() pseudo-class
06:53- :where() pseudo-class
11:00 - :has() pseudo-class

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[sheriffix]

Kevin Powell :is(.the-best) :where(.code) :has(.HTML, .CSS)

[DanielRios]

The :has() is simply amazing, one of the most powerful pseudo-classes, combining it with :is(), :not() and so on is really a game changer

[Technophle]

Protip: In VS Code, when hovered over a selector in CSS, it will show the specificity. E.g. (0, 1, 1)

[Viknesh_KM]

:has() is more powerful than any other 🤩, but as a web developer I am disappointed that its still not supported in Firefox, which makes me not to use these in my projects 😮‍💨

[farhan-app]

Honestly :has() is such a great pseudo class! I started using it in every project.

[michaelcasado]

This is the first time I have heard that ID and class can not start with a number. Love how one can learn small and big things in your videos. And this is, where, has are really handy and I love that these are now more supported. Hope that WordPress theme makers also start using these.

[joelberglund]

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

[kencodes]

Thank you for all your videos! You show us all the best things about CSS and its helped me make my Developer Portfolio look so great!

[criztiandev]

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

[priyadharshinimuthukumar]

thank you so much sir..its really helpful

[drviagrin]

Sweet!!! I did not know that you could prioritize CSS instructions with !important until this video. So nice it helped me fix an issue I was having on my site I am designing for learning. Thank you!

[GR_BackingTracks]

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!

[simplyspenser]

Something is magical about how you pronounce "specificity", its oddly entertaining:)
Thank you for video, very nice and simple explanations.

[andreaskarz]

Wow, cool stuff and nice explained, thank you Kevin

[edafeprosper]

Kelvin you are the best. Thanks for helping me understand how them selectors work

[kylevandeusen]

You said specificity so many times - and nailed them all! 🤘

[pw.]

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

[chrisicotec]

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

[alwinter]

I can imagine :has being useful for navigation menu hierarchy. Very cool!

[mmuralikrishna]

Thanks Kevin for sharing wonderful concept in css.