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

Опубликовано: 06 Март 2024
на канале: CSS Weekly

1,701

129

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: https://codepen.io/ZoranJambor/pen/zY...

Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/

Help support my channel
👨‍🎓 Get a course: https://masteringlinting.com/
🪧 Buy a CSS sticker pack: https://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: https://zoranjambor.com
💼 LinkedIn:   / zoranjambor

- Zoran Jambor
#css