Cómo funciona :has()

La pseudo-clase :has() toma una lista de selectores y selecciona un elemento si contiene cierto descendiente o hermano. Soportada en todos los navegadores principales desde 2026.

Receta 1: Estilos de validación de formularios

.form-group:has(input:invalid) { border-left: 3px solid #e74c3c; }

Muestra/oculta mensajes de error y colorea bordes según el estado del input, sin JavaScript.

Receta 2: Layouts dinámicos de tarjetas

Tarjetas con imagen ajustan su padding automáticamente: .card:has(img) { padding: 0; }

Receta 3: Valoración con estrellas

Usando el combinador ~ dentro de :has(), se pueden estilar elementos hermanos que aparecen después en el DOM.

Receta 4: Galería con filtros

Oculta/muestra elementos según atributos de datos, sin event handlers de JavaScript.

Receta 5: Menús de navegación con dropdown

Mantén el menú abierto al pasar el ratón sobre el trigger o el menú mismo, solo con CSS.

Consideraciones de rendimiento

Evita anidamiento profundo en :has(), usa selectores simples, limita el alcance a un contenedor.