CSS :where() Pseudo-Class

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:

Output:

👁 Image

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

Output:

👁 Image

Browser Support:

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