Pseudo clase :has() de CSS para seleccionar elementos padre

La pseudo clase HAS en CSS brinda la posibilidad de seleccionar un elemento según sus elementos hijos sin utilizar JavaScript, facilitando un diseño eficiente y dinámico solo con estilos CSS. Esta nueva funcionalidad permite simplificar tareas comunes como aplicar estilos condicionales, resultando en desarrollos más optimizados y flexibles.

¿Qué es y cómo funciona la pseudo clase HAS en CSS?

La pseudo clase HAS en CSS permite seleccionar un elemento padre basado en si contiene determinado elemento hijo. Esta característica es útil para aplicar estilos distintos a elementos según condiciones específicas, como la presencia o ausencia de cierto contenido interno.

Para usarla, escribimos el selector seguido de la pseudo clase :has() y dentro de los paréntesis especificamos el selector del elemento hijo.

Ejemplo básico:

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

Este código indica que cualquier div con un párrafo (<p>) dentro tendrá un borde y un fondo amarillo.

¿Cómo aplicar estilos condicionales con inputs usando la pseudo clase HAS?

También podemos utilizar la pseudo clase HAS junto con elementos específicos como inputs para establecer estilos dinámicamente según el estado del elemento.

Ejemplo con checkbox:

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

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

Con esta configuración, al seleccionar el checkbox, el texto del label cambia a verde y negrita automáticamente sin intervención de JavaScript.

¿Cómo mostrar contenido según condiciones en elementos hermanos?

Se puede usar HAS para afectar elementos hermanos según si un elemento contiene o no determinados hijos, proporcionando interactividad visual en relación con el contenido existente o su ausencia.

Ejemplo aplicando en tablas:

<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;
}

table + p {
  display: none;
}

Así, el párrafo debajo de la tabla aparece solo cuando la tabla tiene contenido, logrando una presentación dinámica en función de los datos presentes.

Beneficios de usar la pseudo clase HAS en CSS

La aplicación de HAS permite importantes beneficios en desarrollo web:

• Reduce dependencia de JavaScript para manipulación del DOM.
• Facilita estilos condicionales aplicados dinámicamente.
• Desarrolla páginas web más limpias y livianas.

Al integrar esta pseudo clase en tus proyectos, optimizarás los tiempos de carga y mejorarás la experiencia del usuario con webs más rápidas y adaptables.

¿Has intentado aplicar la pseudo clase HAS en tus proyectos? Comparte tus experiencias o dudas en los comentarios para colaborar en el aprendizaje conjunto.