Cómo usar CSS :has() para crear diseños condicionales sin JavaScript

Durante años, muchas interacciones visuales en una web dependían completamente de JavaScript.

Un cambio de color.
Un elemento que aparece.
Una tarjeta que reacciona según una selección.

Pequeñas acciones que parecían simples… pero que obligaban a añadir scripts incluso para tareas muy básicas.

Hasta que llegó :has().

Y sinceramente, ha cambiado bastante la forma de trabajar CSS moderno.

En Zigor Design nos encantan este tipo de avances porque permiten crear interfaces más limpias, rápidas y elegantes sin complicar innecesariamente el desarrollo.

Qué es el selector CSS :has()

El selector :has() permite aplicar estilos condicionales dependiendo de los elementos hijos que tenga un contenedor.

Dicho de forma sencilla:

CSS ahora puede “reaccionar” a lo que ocurre dentro de un elemento.

Y eso abre muchas posibilidades.

Ejemplo práctico usando un select

Imagina un selector donde el usuario elige un color.

Dependiendo de la opción seleccionada, un bloque cambia automáticamente de color.

Todo esto sin JavaScript.

HTML

<div class="selector-color">
    <select>
        <option value="rojo">Rojo</option>
        <option value="azul">Azul</option>
        <option value="verde">Verde</option>
    </select>

    <div class="caja"></div>
</div>

CSS

.selector-color .caja{
    width:200px;
    height:200px;
    background:gray;
    transition:.3s;
}

.selector-color:has(option[value="rojo"]:checked) .caja{
    background:red;
}

.selector-color:has(option[value="azul"]:checked) .caja{
    background:blue;
}

.selector-color:has(option[value="verde"]:checked) .caja{
    background:green;
}

Por qué :has() está cambiando el diseño web

La gran ventaja de css has selector es que permite crear interacciones visuales mucho más limpias.

Menos JavaScript significa:

• Menos carga de scripts
• Mejor rendimiento
• Código más fácil de mantener
• Interfaces más rápidas
• Menos errores

Y cuando trabajas diseño web profesionalmente, eso importa mucho más de lo que parece.

Porque un usuario no analiza tu código.

Pero sí siente cuando una web funciona bien.

Casos reales donde usar :has()

El selector :has() puede utilizarse en muchísimas situaciones:

• Formularios dinámicos
• Filtros visuales
• Tarjetas activas
• Menus interactivos
• Galerías
• Validaciones visuales
• Estados condicionales
• Diseño responsive avanzado

Y probablemente esto es solo el principio.

Compatibilidad del selector :has()

Actualmente, el selector ya funciona en los principales navegadores modernos:

• Google Chrome
• Edge
• Safari
• Firefox

Puedes consultar la compatibilidad actualizada en la documentación oficial de MDN:

https://developer.mozilla.org/es/docs/Web/CSS/:has

Diseño web y pequeños detalles que marcan la diferencia

En Zigor Design creemos mucho en eso.

En los pequeños detalles.

En las microinteracciones.

En esas decisiones visuales que parecen simples, pero que mejoran muchísimo la experiencia de usuario.

Porque una buena web no es solo una web bonita.

Es una web que transmite profesionalidad desde el primer clic.

Y muchas veces, esa sensación empieza precisamente ahí:

en los pequeños detalles que nadie ve… pero que todo el mundo percibe.

Conclusión

El selector css has selector es una de las novedades más interesantes de CSS moderno.

No solo porque reduce la dependencia de JavaScript.

Sino porque permite crear experiencias mucho más inteligentes, visuales y fluidas.

Y eso, para cualquier diseñador o desarrollador web, es una herramienta muy potente.