Guía Completa del Selector CSS :has(): El Selector Padre que lo Cambia Todo

Durante más de dos décadas, los desarrolladores web han pedido una sola cosa: un selector padre en CSS. La capacidad de estilizar un elemento basándose en sus hijos parecía un sueño imposible. JavaScript era nuestra única salida, lo que llevó a innumerables soluciones alternativas, dolores de cabeza en gestión de estado y compromisos de rendimiento.

Entonces llegó :has().

El selector CSS :has() cambia fundamentalmente cómo pensamos sobre el estilo de interfaces web. No es solo un selector padre—es una pseudo-clase relacional que te permite seleccionar elementos basándote en lo que contienen, lo que viene después de ellos, o virtualmente cualquier relación que puedas expresar en CSS.

En esta guía completa, exploraremos todo lo que necesitas saber sobre :has(): desde la sintaxis básica hasta patrones avanzados, consideraciones de rendimiento y aplicaciones del mundo real que transformarán tu arquitectura CSS.

La Larga Espera por un Selector Padre

Antes de profundizar en :has(), entendamos por qué esta característica tardó tanto en llegar y por qué importa tanto.

El Problema Histórico

Los selectores CSS tradicionales funcionan en una dirección: de padre a hijo. Puedes estilizar un hijo basándote en su padre, pero nunca al revés.

/* Esto funciona - estilizando hijos basándote en el padre */
.card .title {
  font-size: 1.5rem;
}

/* Esto era imposible - estilizando padre basándote en el hijo */
/* .card:contains(.featured-badge) { ... } ← CSS no válido (antes de :has()) */

Esta limitación forzó a los desarrolladores a adoptar patrones incómodos:

Agregar clases modificadoras: .card.has-featured-badge { ... }
Estilizado basado en JavaScript: Escuchar cambios del DOM y alternar clases
Reestructurar HTML: Mover elementos para adaptarse a las limitaciones de CSS

Cada enfoque tenía inconvenientes. Las clases modificadoras creaban acoplamiento entre lógica y estilos. Las soluciones JavaScript añadían complejidad y posibles problemas de rendimiento. La reestructuración HTML comprometía el marcado semántico.

Por Qué Tomó Tanto Tiempo

Los proveedores de navegadores dudaron en implementar selectores padre debido a preocupaciones de rendimiento. Los selectores CSS se evalúan de derecha a izquierda para mayor eficiencia. Un selector padre teóricamente podría requerir que el navegador:

Encuentre todos los elementos descendientes coincidentes
Recorra el árbol DOM hacia arriba para cada coincidencia
Aplique estilos a los ancestros

Este enfoque podría causar cuellos de botella significativos en el renderizado de páginas complejas. La especificación :has() aborda estas preocupaciones con reglas específicas de análisis y evaluación, haciéndolo suficientemente eficiente para uso real.

Entendiendo los Fundamentos de :has()

La pseudo-clase :has() acepta una lista de selectores relativos como argumento y coincide con elementos que tienen al menos un descendiente que coincida con ese selector.

Sintaxis Básica

padre:has(selector-hijo) {
  /* estilos aplicados al padre */
}

El elemento antes de :has() se estiliza cuando contiene cualquier elemento que coincida con el selector dentro de los paréntesis.

Tu Primer Ejemplo con :has()

Empecemos con un ejemplo práctico. Considera un componente de tarjeta:

<div class="card">
  <img src="product.jpg" alt="Product">
  <h3>Título del Producto</h3>
  <p>Descripción del producto...</p>
</div>

<div class="card">
  <h3>Tarjeta Solo Texto</h3>
  <p>Esta tarjeta no tiene imagen.</p>
</div>

Anteriormente, estilizar tarjetas de manera diferente según si contienen una imagen requería JavaScript o clases CSS separadas. Con :has():

/* Estilos de tarjeta por defecto */
.card {
  padding: 1rem;
  border-radius: 8px;
  background: white;
}

/* Tarjetas CON imágenes obtienen un diseño diferente */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
}

/* Tarjetas SIN imágenes centran su contenido */
.card:not(:has(img)) {
  text-align: center;
  max-width: 400px;
}

Esto es CSS puro. Sin JavaScript. Sin clases extra. El estilizado se adapta automáticamente basándose en el contenido.

Más Allá de la Selección de Padres: :has() como Selector Relacional

Aunque "selector padre" captura el caso de uso más común, :has() es mucho más poderoso. Es una pseudo-clase relacional que puede expresar relaciones complejas entre elementos.

Selección de Hermanos con :has()

Puedes seleccionar elementos basándote en sus hermanos usando :has() con combinadores de hermanos:

/* Seleccionar una etiqueta que tiene un input requerido después */
label:has(+ input:required) {
  font-weight: bold;
}

label:has(+ input:required)::after {
  content: " *";
  color: #e74c3c;
}

Este patrón es increíblemente útil para estilizar formularios sin JavaScript.

Selección de Ancestros

:has() puede buscar múltiples niveles de profundidad:

/* Estilizar una sección si contiene CUALQUIER error en su interior */
.form-section:has(.error-message) {
  border-left: 4px solid #e74c3c;
  background: #fdf2f2;
}

/* Estilizar una fila de tabla si contiene una celda editable */
tr:has(td[contenteditable="true"]) {
  background: #fffef0;
}

Combinando Múltiples Condiciones

Puedes encadenar múltiples condiciones :has():

/* Tarjeta con imagen Y badge destacado */
.card:has(img):has(.featured-badge) {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: 2px solid gold;
}

O usar una lista de selectores dentro de :has():

/* Tarjeta con video O imagen */
.card:has(img, video) {
  min-height: 300px;
}

Casos de Uso Reales y Patrones

Exploremos aplicaciones prácticas que muestran el verdadero poder de :has().

1. Estilizado de Validación de Formularios

Uno de los usos más impactantes de :has() es el feedback de validación de formularios solo con CSS:

/* Estilizar grupo de formulario basado en validez del input */
.form-group:has(input:invalid:not(:placeholder-shown)) {
  --input-border-color: #e74c3c;
  --input-bg: #fdf2f2;
}

.form-group:has(input:valid:not(:placeholder-shown)) {
  --input-border-color: #27ae60;
  --input-bg: #f0fdf4;
}

.form-group input {
  border: 2px solid var(--input-border-color, #ddd);
  background: var(--input-bg, white);
  transition: all 0.2s ease;
}

/* Mostrar mensaje de validación solo cuando es inválido */
.form-group .error-message {
  display: none;
  color: #e74c3c;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.form-group:has(input:invalid:not(:placeholder-shown)) .error-message {
  display: block;
}

Esto crea una UI de validación completa y reactiva sin una sola línea de JavaScript.

2. Estados Activos de Navegación

Estilizar elementos de navegación basándote en la página actual o estado activo:

/* Resaltar padre del dropdown cuando cualquier enlace hijo está activo */
.nav-dropdown:has(.nav-link.active) > .dropdown-toggle {
  color: var(--primary-color);
  font-weight: bold;
}

/* Mostrar indicador de dropdown cuando tiene elementos de submenú */
.nav-item:has(.submenu)::after {
  content: "▼";
  font-size: 0.75em;
  margin-left: 0.5rem;
}

3. Manejo de Estados Vacíos

Detectar y estilizar contenedores vacíos:

/* Estilizar contenedor cuando no tiene elementos */
.item-grid:not(:has(.item)) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.item-grid:not(:has(.item))::before {
  content: "No hay elementos para mostrar";
  color: #999;
  font-style: italic;
}

4. Consultas de Cantidad

Aquí es donde :has() se vuelve creativo. Puedes estilizar elementos basándote en la cantidad de hermanos:

/* Estilizar diferente cuando hay solo un elemento */
.item:only-child {
  width: 100%;
}

/* Cuando hay exactamente dos elementos */
.item:first-child:nth-last-child(2),
.item:last-child:nth-last-child(2) {
  width: 50%;
}

/* Estilizar el contenedor cuando tiene más de 3 elementos */
.item-container:has(.item:nth-child(4)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

5. Gestión del Foco

Implementar estados de foco avanzados para accesibilidad:

/* Resaltar toda la tarjeta cuando cualquier elemento enfocable está enfocado */
.card:has(:focus-visible) {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

/* Atenuar otras tarjetas cuando una está enfocada (para navegación por teclado) */
.card-container:has(.card:focus-visible) .card:not(:focus-visible):not(:has(:focus-visible)) {
  opacity: 0.7;
}

6. Comportamiento Responsivo de Componentes

Crear componentes que se adapten basándose en su contenido:

/* Cambiar diseño del header basándose en contenido */
.header:has(.search-bar):has(.user-menu) {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

.header:has(.search-bar):not(:has(.user-menu)) {
  display: grid;
  grid-template-columns: auto 1fr;
}

/* Ajustar ancho del sidebar cuando existen secciones expandidas */
.sidebar:has(.section.expanded) {
  width: 320px;
}

.sidebar:not(:has(.section.expanded)) {
  width: 240px;
}

7. Mejoras de Tablas

Estilizar tablas dinámicamente basándote en el contenido:

/* Resaltar fila cuando el checkbox está marcado */
tr:has(input[type="checkbox"]:checked) {
  background: #e3f2fd;
}

/* Estilizar header diferente cuando la tabla tiene columnas ordenables */
table:has(th[data-sortable]) thead {
  cursor: pointer;
}

table:has(th[data-sortable]) th:hover {
  background: #f5f5f5;
}

/* Agregar indicador visual cuando la tabla está vacía */
table:not(:has(tbody tr)) {
  position: relative;
}

table:not(:has(tbody tr))::after {
  content: "No hay datos disponibles";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
}

Patrones y Técnicas Avanzadas

Combinando :has() con :not()

La combinación de :has() y :not() desbloquea poderosos patrones de negación:

/* Estilizar elementos que NO contienen algo */
.container:not(:has(.advertisement)) {
  /* Estilos de experiencia premium sin anuncios */
  padding: 2rem;
}

/* Tarjetas sin medios */
.card:not(:has(img, video, iframe)) {
  /* Estilos de tarjeta solo texto */
  font-size: 1.1rem;
  line-height: 1.8;
}

Depuración con :has()

Usa :has() para depuración en tiempo de desarrollo:

/* Resaltar imágenes sin texto alt durante desarrollo */
img:not([alt]),
img[alt=""] {
  outline: 5px solid red !important;
}

/* Resaltar formularios con actions vacíos */
form:not([action]),
form[action=""] {
  outline: 3px dashed orange !important;
}

/* Encontrar enlaces que abren en nuevas pestañas sin rel="noopener" */
a[target="_blank"]:not([rel*="noopener"]) {
  outline: 3px solid purple !important;
}

El Patrón de Combinador Hacia Adelante

Usa :has() con el combinador de hermano siguiente para selección de elementos futuros:

/* Estilizar elemento basándote en lo que viene DESPUÉS */
h2:has(+ .special-content) {
  /* Este h2 es seguido por contenido especial */
  color: var(--accent-color);
  border-bottom: 3px solid currentColor;
}

/* Crear efecto de selector "hermano anterior" */
.item:has(+ .item.active) {
  /* Estilizar el elemento ANTES del activo */
  border-right: none;
}

Consideraciones de Rendimiento

Aunque los navegadores modernos manejan :has() eficientemente, entender las implicaciones de rendimiento te ayuda a escribir CSS optimizado.

Cómo los Navegadores Evalúan :has()

Los navegadores implementan :has() con optimizaciones específicas:

Límites de invalidación: Los navegadores establecen límites en qué tan profundo :has() buscará
Caché basado en sujeto: Una vez coincidido, los resultados se cachean para el elemento sujeto
Procesamiento por lotes de mutaciones: Los cambios del DOM se procesan por lotes antes de la reevaluación

Mejores Prácticas para Rendimiento

1. Sé Específico con los Selectores

/* ❌ Selector amplio - evalúa para todos los divs */
div:has(img) { ... }

/* ✅ Selector específico - limita el alcance */
.card:has(img) { ... }

2. Evita el Anidamiento Profundo

/* ❌ Anidamiento profundo requiere recorrer todo el subárbol */
.page:has(.section .container .row .col .card .badge) { ... }

/* ✅ Relaciones directas o superficiales */
.card:has(> .badge) { ... }

3. Usa el Combinador de Hijo Directo Cuando Sea Posible

/* ❌ Busca todos los descendientes */
.menu:has(.active) { ... }

/* ✅ Solo verifica hijos directos */
.menu:has(> .menu-item.active) { ... }

4. Limita la Longitud de la Lista de Selectores

/* ❌ Listas de selectores largas en :has() */
.container:has(img, video, audio, iframe, canvas, svg, object, embed) { ... }

/* ✅ Agrupación semántica con atributos de datos */
.container:has([data-media]) { ... }

Midiendo el Impacto en el Rendimiento

Para medir el rendimiento de :has():

// Usar la API de Performance
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'style-recalc') {
      console.log(`Recálculo de estilo: ${entry.duration}ms`);
    }
  }
});

observer.observe({ entryTypes: ['measure'] });

O usa las DevTools del navegador:

Abre la pestaña Performance
Graba mientras interactúas con elementos que disparan reevaluación de :has()
Busca entradas "Recalculate Style"

Soporte de Navegadores y Fallbacks

A finales de 2024, :has() disfruta de excelente soporte de navegadores:

Chrome: 105+ (Agosto 2022)
Edge: 105+ (Agosto 2022)
Safari: 15.4+ (Marzo 2022)
Firefox: 121+ (Diciembre 2023)
Opera: 91+

Esto significa que más del 95% de usuarios globales pueden usar :has() hoy.

Creando Fallbacks

Para soporte de navegadores legacy, usa consultas de características:

/* Estilos de fallback por defecto */
.card {
  display: block;
}

/* Mejora progresiva con :has() */
@supports selector(:has(*)) {
  .card:has(img) {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

El Patrón @supports

Un patrón robusto para fallbacks de :has():

/* Estilos base - funcionan en todas partes */
.form-group {
  margin-bottom: 1rem;
}

.form-group.has-error {
  border-color: red;
}

/* Navegadores modernos con soporte :has() */
@supports selector(:has(*)) {
  /* Eliminar uso de clases dependientes de JavaScript */
  .form-group.has-error {
    border-color: initial;
  }
  
  /* Usar :has() en su lugar */
  .form-group:has(input:invalid:not(:placeholder-shown)) {
    border-color: red;
  }
}

Errores Comunes y Cómo Evitarlos

Error 1: Malentender la Especificidad de :has()

Un error común es pensar que :has() no añade especificidad. En realidad, :has() toma la especificidad del selector más específico en su lista de argumentos.

/* Cálculo de especificidad */
.card { ... }           /* (0, 1, 0) */
.card:has(img) { ... }  /* (0, 1, 1) -> porque img es (0, 0, 1) */
.card:has(#hero) { ... } /* (1, 1, 0) -> porque #hero es (1, 0, 0) */

Esto es diferente de :where(), que siempre tiene especificidad 0. :has() es dinámico en este sentido.

/* La especificidad aumenta naturalmente */
.card:has(img) { ... }

Error 2: Sobre-dependencia de :has()

No todo necesita :has(). A menudo existen soluciones más simples:

/* ❌ Complicando de más */
.btn:has(svg):has(span) { ... }

/* ✅ Más simple con una clase de utilidad */
.btn.icon-button { ... }

Error 3: Ignorar el Rendimiento del Selector

/* ❌ Costoso - verifica cada elemento */
*:has(.some-class) { ... }

/* ✅ Con alcance apropiado */
.component:has(.some-class) { ... }

Error 4: Dependencias Circulares

Algunos selectores pueden crear bucles infinitos:

/* ⚠️ Ten cuidado con patrones auto-referenciales */
.item:has(+ .item:has(+ .item)) { ... }

El Futuro de la Selección CSS

El selector :has() representa un cambio fundamental en las capacidades de CSS, pero es solo el comienzo. Las futuras especificaciones CSS están explorando:

CSS Nesting: Ahora disponible, funciona bellamente con :has()
Animaciones impulsadas por scroll: Combinar con :has() para efectos de scroll complejos
Container queries: Emparejar con :has() para componentes verdaderamente responsivos
CSS Mixins: Patrones de estilo reutilizables que podrían aprovechar :has()

:has() con CSS Nesting

El anidamiento CSS moderno hace que :has() sea aún más poderoso:

.card {
  padding: 1rem;
  
  &:has(img) {
    display: grid;
    grid-template-columns: 200px 1fr;
    
    & img {
      border-radius: 8px;
    }
  }
  
  &:has(.badge) {
    position: relative;
    
    & .badge {
      position: absolute;
      top: -10px;
      right: -10px;
    }
  }
}

:has() con Container Queries

Lo último en estilizado basado en componentes:

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card:has(img) {
    grid-template-columns: 250px 1fr;
  }
}

@container card (max-width: 399px) {
  .card:has(img) {
    grid-template-columns: 1fr;
  }
}

Refactorización Práctica: Antes y Después

Veamos un ejemplo de refactorización del mundo real. Considera un componente de navegación:

Antes de :has() (JavaScript Requerido)

<nav class="main-nav">
  <ul class="nav-list">
    <li class="nav-item has-submenu expanded">
      <a href="#">Productos</a>
      <ul class="submenu">
        <li><a href="#" class="active">Software</a></li>
        <li><a href="#">Hardware</a></li>
      </ul>
    </li>
  </ul>
</nav>

// JavaScript requerido para gestionar estas clases
document.querySelectorAll('.nav-item').forEach(item => {
  if (item.querySelector('.submenu')) {
    item.classList.add('has-submenu');
  }
  if (item.querySelector('.active')) {
    item.classList.add('expanded');
  }
});

.nav-item.has-submenu > a::after {
  content: "▼";
}

.nav-item.expanded > .submenu {
  display: block;
}

Después de :has() (CSS Puro)

<nav class="main-nav">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#">Productos</a>
      <ul class="submenu">
        <li><a href="#" class="active">Software</a></li>
        <li><a href="#">Hardware</a></li>
      </ul>
    </li>
  </ul>
</nav>

/* ¡Sin JavaScript necesario! */
.nav-item:has(.submenu) > a::after {
  content: "▼";
}

.nav-item:has(.active) > .submenu {
  display: block;
}

.nav-item:has(.active) > a {
  font-weight: bold;
  color: var(--primary);
}

Los beneficios:

HTML más limpio: Sin clases de estado
Sin JavaScript: Elimina una dependencia en tiempo de ejecución
Actualizaciones automáticas: Los cambios en el DOM auto-actualizan los estilos
Mejor rendimiento: CSS es más rápido que JavaScript para esto

Conclusión

El selector CSS :has() es más que un selector padre—es un cambio de paradigma en cómo podemos expresar lógica de estilizado. Después de dos décadas de soluciones alternativas, finalmente tenemos una forma nativa de seleccionar elementos basándonos en sus relaciones con otros elementos.

Puntos Clave

:has() es una pseudo-clase relacional, no solo un selector padre. Puede expresar relaciones de hermanos, condiciones de descendientes y combinaciones lógicas complejas.
El soporte de navegadores es excelente con más del 95%. Puedes usar :has() hoy con fallbacks simples para navegadores legacy.
El rendimiento generalmente no es una preocupación para selectores bien delimitados. Sé específico, evita el anidamiento profundo y usa combinadores de hijo directo cuando sea posible.
:has() reduce la dependencia de JavaScript. Muchos patrones interactivos que requerían JavaScript ahora pueden ser CSS puro.
Combina con características CSS modernas como nesting y container queries para un estilizado basado en componentes aún más poderoso.

La plataforma web continúa evolucionando, cerrando brechas que una vez requirieron soluciones alternativas en JavaScript. El selector :has() es una de las adiciones más significativas a CSS en años, y dominarlo te hará un desarrollador frontend más efectivo.

Empieza pequeño—encuentra un patrón de estilo dependiente de JavaScript en tu base de código y ve si :has() puede simplificarlo. Te sorprenderás de cuán a menudo la respuesta es sí.