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:
HTML
<!DOCTYPE html> < html > < head > < style > * { margin: 0; padding: 0; box-sizing: border-box; } /* CSS selector with :where() pseudo-class */ .GeeeksforBeginner :where(section, p) em { background: green; color: white; } </ style > </ head > < body style = "text-align:center" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >CSS The :where() pseudo-class</ h2 > </ br > < div class = "GeeeksforBeginner" > < p >< em > A computer science portal for Beginner. </ em ></ p > </ br > < section > < em > Beginner 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 */ .GeeeksforBeginner :where(section, p) em { background: rgb(231, 118, 231); color: white; } .GeeeksforBeginner em { background: green; color: white; } </ style > </ head > < body style = "text-align:center" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 > CSS :where() pseudo-class </ h2 > </ br > < div class = "GeeeksforBeginner" > < h2 >This is GeeeksforBeginner 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:
Browser Support:
- Firefox 78+
- Chrome 72 (enable it by experimental web platform features)
Contact Us