Una pseudoclase de CSS es una palabra clave añadida a un selector que especifica un estado especial de los elementos seleccionados.
El selector de pseudoclase CSS :is() toma una lista de selectores como argumento y selecciona cualquier elemento que pueda ser seleccionado por uno de los selectores en esa lista.
Es útil para seleccionar elementos en menos código y de manera más eficiente.
Sintaxis:
:is()
Ejemplo 1: este ejemplo selecciona cualquier h1, h2 y h3 dentro de la clase de contenedor.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS :is Selector</title>
<style>
.container :is(h1, h2, h3) {
color: red;
}
</style>
</head>
<body style="text-align: center">
<div class="container">
<h1>GeeksforGeeks</h1>
<h2>GeeksforGeeks</h2>
<h3>GeeksforGeeks</h3>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo selecciona cualquier h1 dentro de la clase firstDiv o secondDiv.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS :is Selector</title>
<style>
:is(.firstDiv, .secondDiv) h1 {
background: green;
}
</style>
</head>
<body style="text-align: center; margin: auto 30rem">
<div class="firstDiv">
<h1>First Div Heading</h1>
</div>
<div class="secondDiv">
<h1>Second Div Heading</h1>
</div>
</body>
</html>
Producción:
Soporte del navegador:
- Chrome 88.0 y superior
- Firefox v78.0 y superior
- Ópera 74.0 y superior
- Edge 88.0 y superior
- Safari 14.0 y superior