Las pseudo-clases de CSS sirven para seleccionar de manera precisa elementos de la página y ajustar estilos de manera específica ante diversas situaciones. Si trabajas con CSS seguro que las has utilizado muchas veces y las conocerás, siendo algunos ejemplos clásicos :hover, :focus y otros.
Hoy os traemos un nuevo selector que ya se encuentra disponible en Safari Technology Preview, pero que seguramente tardará poco en estar soportado en otros navegadores populares. Se trata de :has() y sirve para obtener elementos que tengan ciertas características indicadas en el ámbito de un selector dado.
Pseudo clase :has()
La pseudo-clase :has() nos sirve para seleccionar elementos que aplican a varios selectores a la vez, siendo alguno de ellos evaluados en el ámbito del selector principal. Para explicar este tipo de selector sería útil presentar primero un ejemplo.
p:has(img) {
border: 1px solid #ccc;
}
Como cualquier pseudo clase, :has() se utiliza sobre un selector determinado, llamémosle selector principal. Sin embargo, en este caso podemos ver que se indica además un selector adicional entre paréntesis. Finalmente la pseudo clase nos ofrecerá elementos donde tengamos el selector principal, pero solamente si el ámbito del selector principal concuerda con los selectores enviados por parámetro. Dado el ejemplo anterior, estaremos seleccionando párrafos (elementos etiquetados con <p>) que tengan dentro una imagen (una o varias etiquetas <img>). Sin embargo, nuestros selectores podrían ser todavía más precisos. Por ejemplo veamos el siguiente código:
p:has(> img) {
border: 1px solid #ccc;
}
En este caso obtendremos únicamente párrafos cuando éstos dispongan de una etiqueta <img> como hija directa.
Selector padre
Las posibilidades de este nuevo selector son muy interesantes, ya que nos permite acceder a elementos padre de otros elementos, por eso esta pseudo clase se ha popularizado con el nombre de «parent selector» o selector padre en español. Para entender este punto veamos el siguiente ejemplo:
form:has(input:invalid) {
background-color: #ffcccc;
}
Esta regla de CSS permite encontrar todos formularios que tienen campos con validaciones HTML5 inválidas. Es decir, podemos encontrar todas las etiquetas <form> que sean padres de elementos de formulario inválidos.
Compatibilidad de :has()
Este selector está disponible actualmente en la preview de Safari, por lo que pronto será distribuido como nueva funcionalidad en el navegador de Apple para todos sus usuarios. Pertenece al grupo de selectores CSS de nivel 4, pero su implementación ha resultado un poco tardía por motivos de rendimiento.
Es posible que cuando leas este artículo ya puedas trabajar con él, incluso que esté disponible en otros navegadores populares del mercado. Recuerda que una referencia rápida para conocer el estado de implementación de los estándares es Caniuse. En este enlace puedes ver cómo está soportada actualmente la pseudo clase :has().