El selector :has() en CSS: selección avanzada

El selector :has() es uno de los avances más potentes en CSS en los últimos años. Nos permite seleccionar un elemento en función de lo que contiene, algo que antes solo era posible con JavaScript.

¿Qué es :has()?

:has() es un pseudo-clase relacional que selecciona un elemento si contiene otro elemento que cumpla una condición. Hasta ahora, podíamos seleccionar descendientes o hijos, pero no podíamos ir hacia atrás en el árbol del DOM con CSS puro. :has() cambia eso.

article:has(h2) {
  border-left: 4px solid tomato;
}

Esto selecciona todos los <article> que tengan al menos un <h2> en su interior.

¿Para qué sirve?

Aplicar estilos condicionales sin JavaScript

.card:has(img) {
  padding-top: 0;
}

Solo aplica el estilo si la tarjeta contiene una imagen.

Estilado en función de formularios válidos o vacíos

form:has(input:invalid) {
  outline: 2px solid red;
}

Evita tener que usar JS para validar visualmente formularios.

3. Menús y estados activos

nav:has(a.active) {
  background-color: #222;
}

Permite estilizar el contenedor según el estado de los elementos internos.

Combinaciones avanzadas

Usar :has() con :not()

section:not(:has(h2)) {
  opacity: 0.5;
}

Reduce opacidad de secciones que no tengan un <h2>.

Seleccionar padres de elementos con estados específicos

.label:has(input:checked) {
  font-weight: bold;
}

Ideal para formularios customizados.

Navegar el DOM de forma condicional

div:has(> ul > li:first-child) {
  margin-bottom: 2rem;
}

El nivel de precisión al que puedes llegar es enorme.

Compatibilidad

:has() está soportado en todos los navegadores modernos excepto Firefox hasta la versión 104. Actualmente es usable en producción si sabes lo que haces, aunque siempre es bueno testear bien.

Gotchas

• No todos los motores CSS lo han optimizado. Puede haber problemas de rendimiento si lo usas con selectores muy complejos en estructuras grandes.
• Firefox fue el último en añadir soporte. Asegúrate de que tus usuarios no estén en versiones obsoletas.
• No puedes usar :has() en @media o @supports directamente.

En resumen

• :has() te permite seleccionar padres en función de sus hijos.
• Puedes construir reglas contextuales más inteligentes.
• Sustituye muchos casos de JavaScript innecesario.

Enlaces útiles

• Documentación oficial MDN
• Compatibilidad en CanIUse