Today, I’d like to share the usefulness of the <code>:is()</code> pseudo-class and the comparison between the <code>:is()</code> and <code>:where()</code> pseudo-class.
<img src="https://media.daily.dev/image/upload/s--WyI9Z5fI--/f_auto/v1732746954/ugc/content_0c88184d-7edf-478d-9b3a-149b141e614c" alt="45826402-eabc-d58e-f0be-efc89125533e">
<h1>🤩 Simplify Styling with :is() Pseudo-Class</h1>
Ever struggled with managing lengthy selector groups? We’ve all been there. Here’s the traditional approach:
<img src="https://media.daily.dev/image/upload/s--59hTvVPp--/f_auto/v1732746416/ugc/content_5c8b7fe9-ffa6-41af-bad5-380351b40cb4" alt="75897b1f-20d4-ca22-ee4a-0bac72e9a2df">
The selector list includes three different levels, containing various combinations of selectors such as:
<ul>
<li>Level 1: ol, ul, menu, dir</li>
<li>Level 2: ol, ul, menu, dir</li>
<li>Level 3: ul, menu, dir</li>
</ul>
Now here’s the problem:
<ol>
<li>
Hard to maintain: Long selector lists can quickly become a nightmare to manage.
</li>
<li>
Prone to errors: If you accidentally include an invalid selector, the entire group becomes invalid, causing unexpected styling issues across your pages. 😱
</li>
</ol>
To address this and resolve the problem, we can utilise the <code>:is()</code> pseudo-class which is more efficient and forgiving way to group selectors!
<h1>Why use <code>:is()</code>?</h1>
The <code>:is()</code> pseudo-class takes the headache out of selector groups:
✅ Cleaner code: It simplifies complex selector lists, making them more readable and maintainable.
✅ Forgiving: Even if some selectors are unsupported, the valid ones will still apply keeping your designs functional. 🎯
Here’s an example of using the <code>:is()</code> pseudo-class:
<img src="https://media.daily.dev/image/upload/s--Ty7UiG8c--/f_auto/v1732746584/ugc/content_e938aafb-4e2a-46ed-a0c3-7749edc8b446" alt="f9900360-70ab-4df5-d7bb-9513b9378092">
With <code>:is()</code>, we can write shorter, more maintainable CSS while avoiding unexpected styling issues.
<h1>What About Specificity?</h1>
Let’s have some fun with a CSS challenge! 🎉
HTML:
<img src="https://media.daily.dev/image/upload/s--hGjHjkPq--/f_auto/v1732746653/ugc/content_c87abb2b-6a2c-4c52-a83e-e31bbd786d84" alt="7b6acf72-b698-d58d-f364-5b5602b7f18c">
CSS:
<img src="https://media.daily.dev/image/upload/s--Y0Q4-bLH--/f_auto/v1732746666/ugc/content_f31fef6a-235b-4d79-b3f6-64104c91b217" alt="11b318a0-7d39-b9be-d224-f8fa393169e4">
Question: What will be the background colour of this button? 🤔
🥁🥁🥁🥁🥁🥁🥁
Answer: It’s red! 🚨
<h2>Why?</h2>
Even though the <code>#btn</code> ID selector isn’t applied in the HTML, the button type selector within the <code>:is()</code> pseudo-class matches the &lt;button&gt; element. And here’s the trick: the <code>:is()</code> pseudo-class uses the highest specificity from its arguments. Since <code>#btn</code> has an ID-level specificity (1,0,0), it overrides the <code>.primary</code> class (0,1,0). So, the <code>:is()</code> rule takes priority, giving the button a red background.
If you’d like to dig deeper into how specificity works, check out this handy guide: <a href="https://frontendly.io/blog/css-specificity-in-depth" target="_blank" rel="noopener nofollow">Specificity in Depth</a>
Looking for even more flexibility with specificity? Say hello to <code>:where()</code> pseudo-class!
<img src="https://media.daily.dev/image/upload/s--AzqXcbf7--/f_auto/v1732746967/ugc/content_071c7143-1cc4-48d2-9378-264b9baad085" alt="962a8713-e3fd-82b7-3046-d084d7a70424">
<h1>What About <code>:where()</code>?</h1>
The <code>:where()</code> pseudo-class works just like <code>:is()</code>, but the only difference is its specificity is always 0. This makes it perfect for styles that should be easily overridden elsewhere in your CSS.
So in the example above, if we replace <code>:is()</code> with <code>:where()</code>:
<img src="https://media.daily.dev/image/upload/s--poQJLBHe--/f_auto/v1732747027/ugc/content_c442f48c-5957-4531-9928-1e0f73b7492a" alt="5ee5d3e1-0a5d-8b20-e141-d3669adac81f">
The button’s background color will now be blue. It’s because the <code>:where()</code> pseudo-class always has a specificity of 0,0,0, making it overridden by the <code>.primary</code> class. 😊
💡 So use <code>:where()</code> when you want to keep your styles low-impact and easily adjustable.
<h1>📺 1-Minute to master <code>:is()</code> and <code>:where()</code></h1>
🔗 <a href="https://youtube.com/shorts/MDm-C1RI70M" target="_blank" rel="noopener nofollow">Understanding :is() Pseudo-Class</a>
<img src="https://media.daily.dev/image/upload/s--Vhf4Z8sz--/f_auto/v1732747218/ugc/content_9e5cdeb4-f16b-44e0-b583-f00daa1138af" alt="368248dd-542b-1eb3-8c1e-ff80830759db">
🔗 <a href="https://youtube.com/shorts/K98OCo-HyUY" target="_blank" rel="noopener nofollow">Specificity Between :is() and :where()</a>
<img src="https://media.daily.dev/image/upload/s--z8LE5b-8--/f_auto/v1732747270/ugc/content_97c03b1b-a692-47a3-857b-8d3319187d0c" alt="2026c433-aaa7-29ed-66a3-00c08ca481a0">
These bite-sized videos will show you how to simplify your CSS, write cleaner code, and make your styles more maintainable.
The next time you’re wrestling with selector groups, remember: <code>:is()</code> and <code>:where()</code> are your new best friends.
I hope you learned something new and feel inspired to try these in your projects.
Happy coding,
Ryan 🥨
P.S. Exciting news! To celebrate Black Friday and Cyber Monday, I’m offering a 30% discount on <a href="https://css-selectors.dev/?utm_source=dailydev&amp;utm_medium=link&amp;utm_campaign=ps" target="_blank" rel="noopener nofollow">CSS selectors course</a>. 🎉 This special sale starts on 29th November and runs for 5 days only. Don’t miss your chance to dive deeper into mastering CSS at an incredible price!

🚀 Learn, practice, and master CSS selectors

CSS-selectors.dev

CSS Selectors

Discover the benefits of using the :is() and :where() pseudo-classes in CSS to simplify and manage longer selector groups. The :is() pseudo-class helps maintain cleaner and error-free code by grouping selectors efficiently, while :where() offers zero specificity, allowing styles to be easily overridden. Learn which one to use in different scenarios to optimize your CSS.

Mastering :is() and :where() pseudo-class