CSS :where

The :where() pseudo-class in CSS is a powerful selector that allows you to apply styles to multiple elements without duplicating code. It can target multiple selectors, simplifying your CSS significantly. The styles defined inside the :where() won't increase specificity, which means they won't interfere with more specific selectors.

Here's a simple fictional example. Suppose we have a list of fruits and we want to apply some styles to different categories without increasing specificity.

<style>
  .fruit-highlight {
    font-weight: bold;
    color: green;
  }

  :where(.citrus, .berry) {
    background-color: yellow;
    padding: 10px;
  }
</style>

<ul>
  <li class="citrus fruit-highlight">Lemon</li>
  <li class="citrus">Orange</li>
  <li class="berry fruit-highlight">Strawberry</li>
  <li class="berry">Blueberry</li>
</ul>

Result:

Lemon
Orange
Strawberry
Blueberry

In this example, all the elements with the classes .citrus and .berry will have a yellow background and some padding due to the :where() selector, while .fruit-highlight will make the text bold and green for the specified fruits.

Using :where() helps keep the CSS cleaner and more maintainable, especially when working with multiple similar classes.