Selectores CSS avanzados: dominio de :has(), :is(), :where() y especificidad
CSS ya no es solo una colección de estilos. Con los selectores modernos, se ha convertido en un potente motor lógico que le permite crear relaciones complejas y receptivas entre elementos sin escribir una sola línea de JavaScript.
En esta guía, exploraremos los "superpoderes" de los selectores CSS y cómo están cambiando la forma en que pensamos sobre la cascada.
2. CSS más limpio con :is() y :where()
Estos selectores "lógicos" le permiten agrupar varios selectores, lo que hace que su código sea significativamente más limpio y legible.
La pseudoclase :is()
Agrupa varios selectores y adopta la especificidad más alta de cualquiera de sus argumentos.
/* Antes */
header h1, header h2, header h3 { margin-bottom: 20px; }
/* Después */
header :is(h1, h2, h3) { margin-bottom: 20px; }
La pseudoclase :where()
Similar a :is(), pero siempre tiene especificidad 0. Esto es perfecto para estilos base (como capas de "reinicio" o "base") que desea sobrescribir fácilmente más adelante.
3. Estilo dirigido con :nth-child() avanzado
El selector :nth-child() ha recibido una actualización importante. Ahora puede usar la sintaxis "of S" para seleccionar un elemento en función de su posición dentro de un subconjunto específico de elementos.
/* Seleccionar el segundo elemento visible en una lista filtrada */
li:nth-child(2 of .visible) {
background-color: yellow;
}
Esto es increíblemente útil para listas dinámicas donde algunos elementos pueden estar ocultos con display: none.
4. Dominar la especificidad
Uno de los mayores puntos de dolor en CSS es la "Guerra de Especificidad", cuando los estilos no se aplican porque otro selector es "más fuerte".
La fórmula de especificidad:
- Estilos en línea: (por ejemplo,
style="...") - Prioridad más alta. - ID:
#my-element(Puntuación: 1, 0, 0). - Clases, atributos, pseudoclases:
.my-class,[type="text"],:hover(Puntuación: 0, 1, 0). - Elementos y pseudoelementos:
div,h1,::before(Puntuación: 0, 0, 1).
Consejo moderno: use @layer (Cascade Layers) para gestionar la especificidad en todo su proyecto.
5. Visualización de la especificidad
Si no está seguro de por qué no se aplica un estilo, le recomendamos usar una Calculadora de especificidad. Esta herramienta desglosa sus selectores y les da una puntuación numérica, ayudándole a identificar el conflicto al instante.
Resumen de selectores avanzados
| Selector | Ideal para | Especificidad | Soporte |
|---|---|---|---|
| :has() | Diseño basado en hijos/estado | Regular | Amplio soporte |
| :is() | Agrupación, código más limpio | Arg. más alto | Amplio soporte |
| :where() | Estilos base de especificidad cero | Siempre 0 | Amplio soporte |
| :nth-child | Estilo de lista dinámica | Regular | Amplio soporte |
Conclusión
Los selectores CSS modernos le brindan la "lógica" de un lenguaje de programación con el rendimiento del CSS nativo. Al dominar :has() y comprender la especificidad, puede crear relaciones de interfaz de usuario que sean más robustas y menos propensas a errores.
¿Quiere probar sus selectores? ¡Consulte nuestro Probador de selectores CSS y esté atento a nuestra próxima Calculadora de especificidad CSS!