Open In App

CSS :where() Pseudo-Class

Improve
Improve
Like Article
Like
Save
Share
Report

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:

where pseudo class

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>


Output:

where pseudo class

Browser Support:

  • Firefox 78+
  • Chrome 72 (enable it by experimental web platform features)


Last Updated : 04 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads