La pseudoclase :where() es útil para minimizar el código más largo en una lista de selectores de CSS más larga. Evita la repetición, simplemente reemplace múltiples selectores con uno solo. En la pseudoclase :where() también puede anular.
Sintaxis:
class_Name :where(html-tages) html-tag {
/* CSS code */
}
Selector sin pseudoclase :where():
.className li em,
.className section em,
.className p em {
// CSS code
}
Selector con pseudoclase :where():
className :where(li, section, p) em {
//CSS code
}
Ejemplo 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>
Producción:
donde pseudo clase
Ejemplo 2: es fácil anular la pseudoclase :where() como se indica en el siguiente ejemplo.
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>
Producción:
donde pseudo clase
Soporte del navegador:
- Firefox 78+
- Chrome 72 (habilítelo mediante funciones experimentales de la plataforma web)
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA