Pseudoclase :has()

La pseudoclase :has() es una de las características más esperadas por la comunidad de desarrolladores web, permitiendo seleccionar elementos padres según sus elementos hijos sin necesidad de JavaScript. Esta poderosa funcionalidad de CSS moderno simplifica la aplicación de estilos condicionales, optimizando el rendimiento y reduciendo la dependencia de scripts adicionales.

¿Qué es la pseudoclase :has() y por qué es tan importante?

La pseudoclase :has() funciona como un selector de tipo "padre" que nos permite aplicar estilos a elementos dependiendo de los elementos hijos que contengan. Antes de su implementación, esta funcionalidad solo era posible mediante JavaScript, lo que hacía que muchas soluciones fueran más complejas y menos eficientes.

Esta pseudoclase responde a una necesidad fundamental en el desarrollo web: poder modificar el estilo de un elemento padre basado en sus hijos, algo que anteriormente representaba una limitación significativa de CSS.

Sintaxis básica y funcionamiento

La sintaxis de :has() es bastante intuitiva:

selector:has(selector_interno) {
    /* estilos a aplicar */
}

Donde:

• selector es el elemento al que queremos aplicar los estilos
• selector_interno es la condición que debe cumplirse dentro del elemento

Este sistema permite crear interfaces reactivas sin necesidad de escribir código JavaScript, simplificando nuestro trabajo y mejorando el rendimiento de nuestras aplicaciones.

Casos prácticos de uso de la pseudoclase :has()

Estilizando un elemento según su contenido

Uno de los casos más comunes es modificar el estilo de un elemento dependiendo de si contiene cierto tipo de elementos hijos.

Por ejemplo, si queremos estilizar un div solo cuando contiene un párrafo:

<div>Este div tiene un párrafo</div>
<div>Este div no tiene un párrafo</div>

div:has(p) {
    border: 1px solid black;
    padding: 10px;
    background-color: yellow;
}

Con este código, solo el primer div recibirá los estilos especificados, ya que es el único que contiene un elemento párrafo.

Aplicando estilos basados en estados de inputs

La pseudoclase :has() también es extremadamente útil cuando trabajamos con formularios y queremos aplicar estilos condicionalmente según el estado de los inputs.

<label>
    <input type="checkbox"> Haceme clic
</label>

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

En este ejemplo, cuando el usuario marca el checkbox, el texto del label cambiará a verde y se pondrá en negrita. Esta respuesta visual inmediata mejora la experiencia del usuario sin necesidad de escribir una sola línea de JavaScript.

Mostrando contenido condicionalmente

Otro caso práctico es mostrar u ocultar contenido según ciertas condiciones. Por ejemplo, podemos mostrar un mensaje solo cuando una tabla contiene datos:

<table border="1">
    <tr>
        <td>Nombre</td>
        <td>Apellido</td>
    </tr>
    <tr>
        <td>Juan</td>
        <td>Pérez</td>
    </tr>
</table>
<p>Esta tabla tiene datos</p>

<table border="1">
</table>
<p>Esta tabla no tiene datos</p>

table:has(tr) + p {
    display: block;
    color: green;
}

p {
    display: none;
}

En este ejemplo, solo se mostrará el párrafo que sigue a la tabla que contiene filas (tr). El párrafo después de la tabla vacía permanecerá oculto.

Ventajas de usar la pseudoclase :has()

La implementación de :has() ofrece numerosos beneficios:

• Reduce la dependencia de JavaScript para manipulaciones simples del DOM
• Mejora el rendimiento al utilizar el motor de renderizado nativo del navegador
• Simplifica el código al manejar condiciones visuales directamente en CSS
• Facilita el mantenimiento al separar claramente la lógica de presentación

Usando esta pseudoclase, podemos crear interfaces reactivas y dinámicas que antes requerían JavaScript, manteniendo una clara separación entre estructura (HTML), presentación (CSS) y comportamiento (JavaScript).

La pseudoclase :has() representa un gran avance en el desarrollo web moderno, permitiéndonos crear interfaces más reactivas y dinámicas utilizando únicamente CSS. Su adopción está creciendo rápidamente y promete convertirse en una herramienta indispensable en el arsenal de todo desarrollador frontend. ¿Ya has comenzado a implementar esta potente característica en tus proyectos? Comparte tus experiencias y descubrimientos en la sección de comentarios.