CSS :where() Pseudo-Class

Last Updated : 04 Jan, 2022

The :where() pseudo-class is helpful for minimization of longer code in a longer CSS selector list. It avoids repetition, just replace multiple selectors with a single one. In :where() pseudo-class you can also override.

Syntax:

class_Name :where(html-tages) html-tag {
    /* CSS code */
}

Selector without :where() pseudo-class:

.className li em,
.className section em,
.className p em {
    // CSS code
}

Selector with :where() pseudo-class:

className :where(li, section, p) em {
    //CSS code
}

Example 1:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* CSS selector with :where() pseudo-class */
        .GeeeksforGeeks :where(section, p) em {
            background: green;
            color: white;
        }
    </style>
</head>

<body style="text-align:center">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h2>CSS The :where() pseudo-class</h2>

    </br>
    <div class="GeeeksforGeeks">
        <p><em>
            A computer science portal 
            for geeks.
        </em></p>
        </br>
        
        <section>
            <em>
                Geeks classes an extensive 
                classroom programme.
            </em>
        </section>
    </div>
</body>

</html>

Output:

Example 2: It is easy to override :where() pseudo-class as given in the below example.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* CSS selector with :where() 
        pseudo-class overriden */
        .GeeeksforGeeks :where(section, p) em {
            background: rgb(231, 118, 231);
            color: white;
        }

        .GeeeksforGeeks em {
            background: green;
            color: white;
        }
    </style>
</head>

<body style="text-align:center">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
        CSS :where() pseudo-class
    </h2>
    </br>
    <div class="GeeeksforGeeks">
        <h2>This is GeeeksforGeeks website</h2> </br>
        <p>
            <em>
                If it will not override, then 
                the background colour of this 
                text is purple
            </em>
        </p></br>
        <section>
            <em>
                If it will override, then the 
                background colour of this text 
                is green
            </em>
        </section>
    </div>
</body>

</html>