:has() não é um seletor de pai. Ele deleta o JavaScript.

Procure no seu código por classList.toggle.

Você provavelmente encontrará muitas instâncias do mesmo padrão. Um usuário clica em uma checkbox ou foca em um campo. Você usa JavaScript para alternar uma classe em um elemento pai. Isso permite que o CSS estilize o pai.

Você pode deletar a maior parte desse código.

As pessoas chamam o :has() de seletor de pai. Esse rótulo está errado. O :has() testa uma condição. Ele analisa o conteúdo de um elemento para decidir se um estilo deve ser aplicado.

Ele pode verificar:

  • Um elemento descendente
  • Um irmão específico
  • Uma contagem de itens
  • A ausência de um elemento

Aqui estão alguns exemplos:

• Estilize um card se ele contiver uma imagem: .card:has(img) { ... }

• Estilize uma linha quando uma checkbox estiver marcada: .option-row:has(input:checked) { background: var(--selected-bg); }

• Altere o layout de uma grid com base na contagem de itens: .grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

O último exemplo altera um layout usando apenas CSS. Ele lê o estado atual do DOM.

Antes, você precisava do JavaScript para agir como um mensageiro. Um filho não conseguia disparar estilos em um ancestral. Você tinha que escrever um listener para mover uma classe para cima na árvore.

Agora, o mensageiro sumiu.

Se você usar o :has(), seus estilos estarão sempre corretos. Eles funcionam na primeira renderização. Eles funcionam quando um usuário volta no navegador. Não há atraso entre a mudança de estado e a mudança de estilo.

Use para:

  • Validação de formulários
  • Estados vazios em listas
  • Painéis alternáveis

Note que o :has() tem um custo. O navegador deve avaliar o seletor interno em relação aos descendentes. Para a maioria das tarefas de UI, como validação ou toggles, você não notará diferença.

Evite usá-lo para mudanças de alta frequência, como posições de scroll ou milhares de estados de hover.

Pare de alternar classes apenas para aplicar estilos a partir de um filho. Pergunte-se se o :has() pode expressar essa condição em vez disso. Seu CSS diminuirá e seu JavaScript desaparecerá.

:has() funciona no Chrome, Firefox, Safari e Edge.

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