:where() CSS Pseudo Class

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<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>

CSS

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;

}