:where() CSS Pseudo Class

Description

The :where() pseudo-class in CSS is a powerful selector that allows you to apply styles to elements that match a certain condition, similar to the :is() pseudo-class. It is particularly useful for simplifying complex selectors and making your CSS code more concise and readable.

Here's a brief description of the :where() pseudo-class:
:where() selects elements that match a specified condition within its parentheses. It can take any valid CSS selector as its argument, and it will apply styles to elements that match that selector.

For example, if you want to select all <p> elements with a class of "highlight" or all <h1> elements with a class of "title," you can use :where() like this:

:where(p.highlight, h1.title) {
/* Styles for matching elements */
color: red;
font-weight: bold;
}

In this example, the :where() pseudo-class simplifies the selector by allowing you to group multiple selectors within its parentheses, making your CSS code more efficient and easier to maintain. It is supported in modern browsers and is a valuable tool for writing cleaner and more concise CSS styles.

Syntax

:where(:valid, :unsupported) {
  /* … */
}

Example

<ol>
<li>Saturn</li>
<li>
<ul>
<li>Mimas</li>
<li>Enceladus</li>
<li>
<ol>
<li>Voyager</li>
<li>Cassini</li>
</ol>
</li>
<li>Tethys</li>
</ul>
</li>
<li>Uranus</li>
<li>
<ol>
<li>Titania</li>
<li>Oberon</li>
</ol>
</li>
</ol>
ol {
list-style-type: upper-alpha;
color: darkblue;
}

/* Not applied to ol, because of lower specificity */
/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:where(ol, ul, menu:unsupported) :where(ol, ul) {
color: green;
}

:where(ol, ul) :where(ol, ul) ol {
list-style-type: lower-greek;
color: chocolate;
}

Browser Support

The following table will show you the current browser support for the CSS :where() pseudo class.

Desktop
Edge Chrome Firefox Opera Safari
8888787414
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
887963141588

Last updated by CSSPortal on: 1st October 2023