CSS :where(selector) Pseudo-class

CSS :where(selector)

The CSS :where() pseudo-class is similar to :is(), but with one key difference: it assigns zero specificity to the styles it applies. This makes :where() useful for styling elements without increasing specificity conflicts in your CSS.

The syntax for the :where() pseudo-class is:

</>

Copy

selector:where(selector1, selector2, ...) {
    property: value;
}

Where:

Parameter	Description
`selector`	The element to which the styles will apply.
`selector1, selector2, ...`	The group of selectors inside the `:where()` pseudo-class. Styles will apply to any element matching one of these selectors, with zero specificity impact.
`property`	The CSS property to style the matched elements.

Examples

1. Styling Multiple Heading Levels

In this example, all headings from h1 to h3 are styled with a red color and italic text.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        :where(h1, h2, h3) {
            color: red;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
</body>
</html>

2. Styling Multiple Input Types

Here, input elements of type text, email, and password are styled with a yellow background and border radius.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:where([type="text"], [type="email"], [type="password"]) {
            background-color: yellow;
            border-radius: 8px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" placeholder="Name"><br><br>
        <input type="email" placeholder="Email"><br><br>
        <input type="password" placeholder="Password">
    </form>
</body>
</html>

3. Styling Links with Specific Classes

In this example, links with the classes .external or .internal are styled with a blue underline.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:where(.external, .internal) {
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="https://example.com" class="external">External Link</a><br>
    <a href="#section1" class="internal">Internal Link</a>
</body>
</html>

4. Styling List Items Inside Different Lists

Here, li elements inside both ul and ol are styled with a green font color and font weight.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        :where(ul, ol) li {
            color: green;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
    <ol>
        <li>First item</li>
        <li>Second item</li>
    </ol>
</body>
</html>

5. Styling Paragraphs with Zero Specificity

In this example, paragraphs with the classes .highlight or .note are styled with a lightgray background using :where() to avoid specificity issues.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:where(.highlight, .note) {
            background-color: lightgray;
            padding: 10px;
        }
    </style>
</head>
<body>
    <p class="highlight">This is a highlighted paragraph.</p>
    <p class="note">This is a note.</p>
</body>
</html>

TutorialKart

CSS :where(selector) Pseudo-class