: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.
For more information and examples, you can check the following resources: