Pseudo-clase relacional :has()

La pseudoclase :has() selecciona un elemento si contiene un descendiente que coincide con el argumento. A menudo llamada el «selector de padre», permite aplicar estilos a un elemento padre según sus elementos hijos, una capacidad que CSS nunca había tenido.

.card:has(img) selecciona cualquier elemento .card que contenga un descendiente img. El argumento es una lista de selectores relativos: cualquier selector CSS válido que describa elementos en relación con el elemento sujeto.

Aplique estilos a un contenedor de formulario cuando contenga una entrada no válida: form:has(:invalid) { border-color: red; }. Aplique estilos a una sección que contenga un encabezado: section:has(h2) { padding-top: 2rem; }. El elemento padre cambia de apariencia según el estado del elemento hijo.

:has() puede seleccionar hermanos anteriores, algo que + y ~ no pueden hacer. h2:has(+ p) selecciona elementos h2 seguidos inmediatamente por p. li:has(~ .active) selecciona elementos li que tienen un hermano posterior .active.

Reaccione a la validez nativa de los formularios sin JavaScript: input:has(~ .error-msg) aplica estilos a una entrada que tiene un mensaje de error hermano. label:has(+ input:required) aplica estilos a las etiquetas cuyo campo de entrada asociado es obligatorio, todo únicamente con CSS.

Resalte los contenedores de navegación según el elemento hijo activo: nav:has(.active) aplica estilos a toda la navegación cuando cualquier elemento hijo tiene la clase active. Es útil para indicar, a nivel del contenedor, qué sección de navegación está activa.

.grid:has(.card:focus-within) aplica estilos a toda la cuadrícula cuando cualquier tarjeta recibe el foco del teclado. .dropdown:has(:hover) mantiene abierto un menú desplegable mientras se pasa el puntero sobre cualquier descendiente, de forma más sencilla que las cadenas complejas de combinadores de hermanos.

.sidebar:has(nav) aplica una distribución diferente a .sidebar:not(:has(nav)). Permite crear una distribución condicional sin JavaScript: la presencia o ausencia de determinados elementos hijos determina la distribución del elemento padre, lo que permite usar CSS realmente adaptable y consciente del contenido.

Usar :has() con selectores de argumento amplios, como :has(*), puede ser costoso, ya que el navegador debe comprobar todos los elementos. Mantenga específicos los argumentos de :has(). Cuando sea posible, prefiera :has(> .specific-child) (hijo directo) a :has(.specific-child) (cualquier descendiente).

:has() es compatible con Chrome 105+, Safari 15.4+ y Firefox 121+. Cuenta con compatibilidad completa de línea base desde finales de 2023. No existe ningún polyfill (requeriría JavaScript para simularlo); úselo con mejora progresiva en navegadores antiguos cuando la funcionalidad no sea esencial.

Patrones que antes requerían detectores de eventos de JS: «añadir una clase al padre cuando el hijo recibe el foco», «mostrar una superposición cuando existe modal-trigger» y «aplicar estilos diferentes a una cuadrícula cuando tiene exactamente tres elementos». :has() gestiona todos estos casos de forma declarativa.

¿Qué hace que :has() sea único frente a combinadores CSS existentes como + y ~?

:has() es la primera pseudoclase relacional verdadera de CSS y permite seleccionar elementos padre y hermanos anteriores. Permite aplicar estilos determinados por el contenido, reaccionar al estado de los formularios, resaltar la navegación y resolver muchos patrones que antes requerían manipular el DOM con JavaScript, todo de forma declarativa en CSS.