The :is() and :where() selectors in CSS

Published Apr 3, 2024

Written by: Abdulmumin Yaqeen

:is() and :where() are CSS functional pseudo-classes introduced in the Selectors Level 4 specification. They allow you to create more concise and maintainable CSS code by grouping selectors and applying styles to them.

:is() Selector Function

The :is() selector function is used to apply a set of styles to a group of selectors. It takes a list of selectors as its argument and matches elements that match any of the selectors in the list.

Here is an example:

:is(header, footer) a:hover {
	color: green;
	text-decoration: underline;
}

In this example, the :is() selector function is used to apply the a:hover styles to the <header> and <footer> elements.

:where() Selector Function

The :where() selector function is similar to :is() selector function, but it has a different specificity value. The :where() selector function has a specificity value of zero, which makes it easier to override styles.

Example with Tags;

:where(article, section, aside) {
	color: gray;
}

article {
	color: red;
}

In this example, the :where() selector function is used to apply the color: gray style to the <article>, <section>, and <aside> elements. However, if you apply a different color style to the <article> element, it will take precedence over the :where() selector function.

Example with classes;

:is(.info, .notice) {
	color: red;
	font-weight: bold;
}

In this example, the :is() selector function is used to apply the color: red and font-weight: bold styles to elements that have the .info or .notice class.

Similarly, the :where() selector function is used to apply styles to a group of selectors with a specificity value of zero. So, you can use :where() to apply styles to multiple class selectors without worrying about their specificity.

Here is an example:

:where(.info, .notice) {
	color: red;
	font-weight: bold;
}

In this example, the :where() selector function is used to apply the color: red and font-weight: bold styles to elements that have the .info or .notice class. The specificity value of :where() is zero, so it will not override other styles with higher specificity.

Note that both :is() and :where() selector functions can take a list of class selectors as their argument, separated by commas. Also, you can use them with any other selectors, not just class or tag selectors.

Browser Support

Both :is() and :where() selector functions are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. However, it is not supported in Internet Explorer (obviously 😅).

Conclusion

The :is() and :where() selector functions are powerful CSS functional pseudo-classes that can help you create more concise and maintainable CSS code. They are supported in all modern browsers, but they are not supported in Internet Explorer.

And hey, if you're itching to try them out

Fire up Devcanvas and start experimenting with the :is and :where selectors. It's the best way to get a feel for how they work!

Beginner-friendly
Interactive Code Sandbox

For more information and examples, you can check the following resources:

Tagged with: CSS specificity css selectors breakdowns
Love it? Share it!

0 Comments

Be the first to comment!

DevCanvas DevCanvas Logo

Online Editor with a collection of awesome frontend code and code snippets for developers of all levels.

Legal & Support

Stand with Palestine 🇵🇸! DO NOT BE SILENCED

© 2024 DevCanvas. All rights reserved.