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 */
.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
Share your thoughts in the comments
Please Login to comment...