Simplify Your CSS Using :is() and :where() Pseudo-Classes
HTML-код
- Опубликовано: 27 июл 2024
- 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 
Наука
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 { … }”
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
@@CSSWeekly makes sense as it’s not actually inside the :is() and totally explains why :is(.element::before) wasn’t working! Thanks!
Great! Thank you!
You are welcome, Max! Thanks for watching and commenting! 🙂
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 🚀🚀🚀
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
Very useful info! Thanks a lot to the author!
I’m thrilled to hear you found it useful! Thanks for watching and commenting! 🙏
cleared all my doubts regarding :is() and :where().
Thanks a lot.
You're very welcome! I'm thrilled to hear this, Rohan! 🙂
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!
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. 🙂
@@CSSWeekly Interested already on a deep dive video on specificity👍
Great to hear this! 🙂
Awesome explanation, all questions answered :).
I use :is mainly for grouping hover and focus states.
:is(input, button):focus-visible {...}
Thank you, Martin! This is a great tip! 🙂
Wow,.....I am curious!
.... just comment for youtube!
Thanks so much, Serhii! 🙏
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.
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?
@@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.
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. 🙂