Nuevos selectores
Selector :is()
La pseudoclase :is() de CSS es una herramienta que te permite agrupar y simplificar selectores complejos, haciendo tu código mucho más corto y fácil de leer. Te permite aplicar los mismos estilos a múltiples elementos que comparten un contexto común, sin tener que repetir el selector una y otra vez.
main .article1, main .article2, main .article3{
border: 1px solid red;
}El resultado es idéntico, pero el código es mucho más limpio. :is() toma una lista de selectores como argumento y selecciona cualquier elemento que coincida con alguno de ellos dentro de esa lista.
Con :is() la especificidad se calcula sumando la más alta de sus parámetros, siendo en el ejemplo anterior (0,1,1).
Selector :where()
La pseudoclase :where() recibe como argumento una lista de selectores y selecciona cualquier elemento que pueda ser seleccionado por un selector de esa lista. La diferencia se encuentra con la especificidad, donde :is() tiene por especificidad su valor más alto y :where() en cambio SIEMPRE es 0, es decir, su especificidad es la que está fuera del where (.container).
main :is(.article1, .article2, .article3){
/* Selector Specificity: (0, 1, 1) */
border: 1px solid red;
margin: 5px;
}
main :where(.article1, .article2, .article3){
/* Selector Specificity: (0, 0, 1) */
border: 1px solid green;
margin: 5px;
}¿Cuándo usar :is y cuándo :where?
- Usa :is() cuando quieras agrupar selectores y mantener la especificidad del más fuerte del grupo. Es útil para reducir la repetición sin perder "poder" en tus reglas.
- Usa :where() cuando quieras agrupar selectores pero asegurarte de que la regla sea muy fácil de sobrescribir. Es perfecto para estilos base, temas o librerías de CSS donde no quieres causar conflictos de especificidad.
Selector :has()
El selector :has() selecciona un elemento precedido, si sus hijos cumplen una serie de criterios. Se le conoce como selector padre o relacional.
a:has(>img) {
/* Se aplica sobre el enlace sólo si en el interior existe una etiqueta img */
}
h1:has(+p) {
/* Selecciona los encabezados h1 que van seguidos de manera inmediata de un párrafo */
}
article:has(>h2){
color: blue;
}
article:has(>h2):has(>p){
color: green;
}
/* h2:has(+p){
color: pink;
} */Selector :not()
La pseudoclase :not() nos permite seleccionar todos los elementos que no cumplan los criterios indicados en sus parámetros. Es una forma de excluir elementos de una regla general.
p:not(.general) {
/* todos los párrafos que no pertenezcan a la clase general
se les aplicará dicho estilo */
}
article:not(p){
color: purple;
}Veamos un ejemplo donde pongamos en práctica todos los selectores vistos en este punto
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Selectores CSS</title>
<link rel="stylesheet" href="2.selectores.css">
</head>
<body>
<main>
<article class="card featured">
<h2>Artículo Destacado</h2>
<p>Este artículo es especial y tiene un estilo diferente. No tendrá el borde inferior que tienen los demás.</p>
<footer>
<a href="#">Leer más...</a>
</footer>
</article>
<article class="card">
<h2>Artículo con Imagen</h2>
<p>Este artículo cambia su diseño porque contiene una imagen. El selector <code>:has()</code> lo detecta y aplica estilos al contenedor <code>article</code>.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQXZ6Vw-Br-RRvMstTlTqbeGXw4PNepXRrTzg&s" alt="Imagen de ejemplo">
</article>
<article class="card">
<h2>Otro Artículo Normal</h2>
<p>Este es un artículo estándar, con estilos base. Tiene un borde inferior gracias a la regla con <code>:not()</code>.</p>
</article>
<div class="contact-form">
<h3>Formulario de Contacto</h3>
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" required>
<label for="email">Email:</label>
<input type="email" id="email" required>
<input type="submit" value="Enviar">
<input type="reset" value="Reset">
</form>
</div>
</main>
</body>
</html>