The :where() pseudo-class in CSS is a functional pseudo-class that allows you to group one or more selectors and apply styles to any element that matches them. Its primary feature is that it has zero specificity, meaning that using :where() does not increase the specificity of your rule. This makes it particularly useful when you want to apply broad styles without overriding other rules unintentionally.

Unlike :not(), which excludes elements from a style rule, :where() explicitly matches elements that meet the criteria defined inside its parentheses. You can pass multiple selectors separated by commas, and all elements that match any of the selectors will receive the styles.

One of the practical applications of :where() is to simplify the styling of nested elements or to apply utility-like styles without specificity conflicts. It is often used in combination with other selectors to ensure that styles remain predictable and do not interfere with more specific rules.

Example 1: Basic usage

:where(h1, h2, h3) {
    color: darkblue;
    font-family: Arial, sans-serif;
}

In this example, all h1, h2, and h3 headings will have a dark blue color and Arial font, but the rule will not interfere with other styles that have higher specificity.

Example 2: Nested elements

article :where(p, li) {
    margin-bottom: 1rem;
}

Here, all paragraphs and list items inside an article element will get a bottom margin. Using :where() ensures that these styles do not override other more specific rules you might have for p or li elements elsewhere.

Example 3: Combining with classes

:where(.btn, .link) {
    padding: 0.5em 1em;
    text-decoration: none;
    background-color: lightgray;
}

In this case, any element with the class .btn or .link will receive consistent padding and background styling, while keeping specificity low, allowing more specific button states like hover or active to override these base styles.

Overall, :where() is a powerful tool for creating broad, reusable styling patterns without increasing specificity, making it ideal for utility-based CSS and component libraries.