:has() no es un selector de padre. Elimina JavaScript.

Busca classList.toggle en tu código.

Probablemente encuentres muchas instancias del mismo patrón. Un usuario hace clic en una casilla de verificación o se enfoca en un campo. Usas JavaScript para alternar una clase en un elemento padre. Esto permite que CSS aplique estilos al padre.

Puedes eliminar la mayor parte de este código.

La gente llama a :has() el selector de padre. Esta etiqueta es incorrecta. :has() comprueba una condición. Examina el contenido de un elemento para decidir si se aplica un estilo.

Puede comprobar:

  • Un elemento descendiente
  • Un hermano específico
  • Un recuento de elementos
  • La ausencia de un elemento

Aquí tienes algunos ejemplos:

• Estiliza una tarjeta si contiene una imagen: .card:has(img) { ... }

• Estiliza una fila cuando una casilla de verificación está marcada: .option-row:has(input:checked) { background: var(--selected-bg); }

• Cambia el diseño de una cuadrícula según el número de elementos: .grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

El último ejemplo cambia un diseño usando CSS puro. Lee el estado en vivo del DOM.

Antes, necesitabas JavaScript para que actuara como mensajero. Un hijo no podía activar estilos en un ancestro. Tenías que escribir un listener para mover una clase hacia arriba en el árbol.

Ahora, el mensajero ha desaparecido.

Si usas :has(), tus estilos siempre serán correctos. Funcionan en el primer renderizado. Funcionan cuando un usuario retrocede en su navegador. No hay retraso entre el cambio de estado y el cambio de estilo.

Úsalo para:

  • Validación de formularios
  • Estados vacíos en listas
  • Paneles conmutables

Ten en cuenta que :has() tiene un coste. El navegador debe evaluar el selector interno frente a los descendientes. Para la mayoría de las tareas de UI, como validaciones o conmutaciones, no notarás la diferencia.

Evita usarlo para cambios de alta frecuencia, como posiciones de scroll o miles de estados de hover.

Deja de alternar clases solo para aplicar estilos desde un hijo. Pregúntate si :has() puede expresar esa condición en su lugar. Tu CSS se reducirá y tu JavaScript desaparecerá.

:has() funciona en Chrome, Firefox, Safari y Edge.

Fuente: https://dev.to/parsajiravand/has-isnt-a-parent-selector-it-deletes-javascript-4hej