Cómo y cuándo utilizar :has()

El año 2023 debía de ser el año de :has() una función de CSS que permite evaluar si un selector “contiene algún otro elemento”, útil para aplicar estilos a un contenedor en función de su contenido, algo parecido al selector padre que nunca llegó a CSS (ni llegará), pero tuvimos que esperar hasta final de año para poder usarlo a discrección, y es que fue entonces cuando Firefox lo implementó y quedaba por fin ampliamente cubierto por la gran mayoría de navegadores. CanIUse

Hasta ese momento podíamos usarlo o bien para detalles estéticos que no fueran críticos y asumir que habría usuarios que no lo verían, o bien ofrecer una alternativa (fallback) usando javascript, lo que suponía añadir complejidad al asunto (a menudo no necesaria) aumentando el riesgo de fallar, porque codificar nos empuja a la posibilidad de cometer errores, ¿no?

Así que este artículo llega con un año de retraso pero al mismo tiempo llega más maduro.

Casos de uso

:has() acepta como argumento una lista de selectores relativos (<relative-selector-list>) y comprueba si al menos uno de ellos coincide con el DOM. Si la condición se cumple.

El ejemplo sencillo sería p:has(> a) en el que se evalúa si un párrafo contiene un enlace. La diferencia con p > a es que en el primer caso estamos seleccionando el p mientras que en el segundo los estilos se aplican a a que es el elemento seleccionado. Por eso decimos que podemos aplicar estilos condicionalmente en función de su contenido o que es como un selector padre.

Pero es algo más.

Como el selector es relativo, el argumento hace relación al elemento que evalúa (el que lo usa), pero podríamos querer aplicar estilos a un elemento hermano en función de si el anterior (o padre) tiene alguna particularidad, por ejemplo: section:has(.box) + section

A partir de aquí, puedes intentar las queries más raras que se te ocurran, algunas funcionarán y otras no o no a la primera, sobre todo son difíciles las que involucran todas las pseudo-clases del estilos nth-of-type() pero algunas de las más comunes son, por ejemplo:

Comprobar si un elemento contiene otro

Evaluar si un elemento contiene otro elemento, clase u atributo.

article:has(h1, h2, h3, h4, h5, h6)

section:has([class^="item"]) li[class]

Comprobar si un elemento NO contiene otro

Podemos también evaluar si un elemento no contiene otro elemento, clase u atributo.

figure:not(figcaption)

Hay que prestar atención al combinarlo con :not() porque el orden de declaración altera el sentido de la expresión, no es lo mismo li:not(:has(span)) que li:has(:not(span)) porque no es lo mismo que no contenga span a que contengan cualquier cosa que no sea un span.

Contar hijos

Podemos evaluar el número de hijos que tiene un nodo para aplicar una solución tipo flex o grid.

ul {
  display: flex;
}

ul:has(> :nth-child(5)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Comprobar si hay elementos abiertos

Como podemos evaluar clases o atributos, es una solución ideal para bloquear el scroll de la página cuando un elemento emergente está abierto.

body:has(.is-modal-open) {
  overflow-y: hidden;
}

body:has(dialog[open], details[open]) {
  overflow-y: hidden;
}

body:has([aria-expanded="true"]) {
  overflow-y: hidden;
}

Peculiaridades

Por supuesto no todo es jauja, hay ciertas limitaciones

:has() no se puede anidar, así que selectores de este estilo no funcionarán

body:has(section:has(span)) {
	outline: 10px solid lime;
	outline-offset: -12px;
}

:has() no puede evaluar pseudo-elementos (esos elementos que son virtuales) porque no los puede evaluar en el DOM.

body:has(::before) {
	color: #f06;
}

Demo

Aquí una pequeña demo para que puedas probar lo explicado anteriormente.

Para ampliar más

Las combinaciones de :has() son muchas, tantas que rara vez las necesitarás usar porque podrás poner solución con otras herramientas o enfoque, pero conviente saber hasta dónde se puede llegar a estresar. Para ampliar más, no se me ocurre mejor lugar bram.us donde encontrarás una amplia colección de artículos relacionados, en los que se lleva la capacidad de :has() muy al límite.

Recursos

• Especificación
• MDN
• CanIUse
• Bram.us