Simplify Your CSS Using :is() and :where() Pseudo-Classes

Рет қаралды 1,575

Күн бұрын

A detailed guide to :is() and :where() CSS pseudo-classes, explaining exactly how they work, what's the difference between them, and how they can help you simplify your CSS, along with some gotchas you should keep in mind.
Demo: codepen.io/ZoranJambor/pen/zY...
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
Help support my channel
👨‍🎓 Get a course: masteringlinting.com/
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: / cssweekly
📖 Chapters
00:00 How :is() pseudo-class works
02:12 How to simplify selector lists using nested :is() statements
03:02 How specificity works with :is()
05:31 The difference between :is() and :where() pseudo-classes
06:53 Gotchas - :is() and :where() are forgiving07:44 Gotchas - pseudo-elements don’t work with :is() and :where()08:26 Gotchas - :is() was originally named :matches() and :any()
08:44 When to use :is() and :where() pseudo-classes
Keep up-to-date with CSS Weekly:
🐦 Twitter: / @cssweekly
🎶 TikTok: / cssweekly
🎇 Instagram: / cssweekly
📘 Facebook: / cssweekly
Keep up to date with what I'm up to:
👨‍💼 Blog: zoranjambor.com
💼 LinkedIn: / zoranjambor
- Zoran Jambor
#css

Пікірлер: 23

@clevermissfox 4 ай бұрын

Could swear I’ve used pseudo elements with :is()…. But I also know I’ve had problems with some pseudo element selectors which I was blaming on nesting. Very good to know! Thanks! EDIT: turns out the example I was thinking about is actually “& :is(.element)::before { … }”

@CSSWeekly 4 ай бұрын

This is very interesting! I just tested your example, and ::before seems to be working. It should be a problem only within :is(). 🤷‍♂️ Here's my test: cln.sh/2GYMLS2l

@clevermissfox 4 ай бұрын

@@CSSWeekly makes sense as it’s not actually inside the :is() and totally explains why :is(.element::before) wasn’t working! Thanks!

@ilirbeqiri253 4 ай бұрын

To be honest, to me, :matches() looks more appropriate name for :is(), and i dont know why they changed it. As always great explanations from your side 🚀🚀🚀

@CSSWeekly 4 ай бұрын

Thank you so much, Ilir! 🙏 Yes, :matches() is a reasonable name, but according to a GitHub issue on the subject, :is() makes more sense when paired with :not(), which is its opposite. That's why they renamed it. Link: github.com/w3c/csswg-drafts/issues/3258

@inteltone 4 ай бұрын

Very useful info! Thanks a lot to the author!

@CSSWeekly 4 ай бұрын

I’m thrilled to hear you found it useful! Thanks for watching and commenting! 🙏

@MaxMov-sp8hr 4 ай бұрын

Great! Thank you!

@CSSWeekly 4 ай бұрын

You are welcome, Max! Thanks for watching and commenting! 🙂

@rohanverma872 4 ай бұрын

cleared all my doubts regarding :is() and :where(). Thanks a lot.

@CSSWeekly 4 ай бұрын

You're very welcome! I'm thrilled to hear this, Rohan! 🙂

@ahmad-murery 4 ай бұрын

CSS specificity used to be easy to remember, but with the addition of all these great CSS functions it's becoming harder to remember/calculate, fortunately VSCode can do it for you if hover over a CSS selector. Very well explained. Thanks Zoran!

@CSSWeekly 4 ай бұрын

Thanks for the tip, Ahmad! It seems like one of my next shorts should be exactly this VS Code specificity tip! 🙂 And a deep dive on specificity might be interesting as well. 🙂

@ahmad-murery 4 ай бұрын

@@CSSWeekly Interested already on a deep dive video on specificity👍

@CSSWeekly 4 ай бұрын

Great to hear this! 🙂

@ScriptRaccoon 4 ай бұрын

Awesome explanation, all questions answered :). I use :is mainly for grouping hover and focus states. :is(input, button):focus-visible {...}

@CSSWeekly 4 ай бұрын

Thank you, Martin! This is a great tip! 🙂

@SerhiiUa51 4 ай бұрын

Wow,.....I am curious! .... just comment for youtube!

@CSSWeekly 4 ай бұрын

Thanks so much, Serhii! 🙏

@joel-rg8xm 4 ай бұрын

awesome content that I don't miss. Please, please, I know it's your style but don't move too much your arms and hands, it's kind of distracting to grasp the conveying knowledge.

@CSSWeekly 4 ай бұрын

Thanks for your feedback, Joel! I didn't realize I was moving my arms and hands so much, but honestly, I don't think I can change this. It feels like I'll get too robotic if I try to consciously move them less. 😀 Does this apply mainly to intros or to the rest of the video as well?

@joel-rg8xm 4 ай бұрын

@@CSSWeekly it applies to all of the duration of the video I'm afraid, lol but, thanks for replyng, I made the same remark to another youtuber that nodded his head all the time so I kept nodding my head as well while watching his videos and he seemingly bothered at my constructive comment.

@CSSWeekly 4 ай бұрын

I believe comments like this can show you the aspects where you can (or should) improve your presentation, so I really appreciate you taking the time to write it down. 🙏 Another comment along yours I got is that it might be due to motion blur and a lower recording frame rate (30fps). I might try adjusting this to see if it improves things, at least in this sense. 🙂