:has() — O Parent Selector do CSS

O :has() é uma pseudo-classe do CSS que finalmente resolve um problema clássico: selecionar um elemento com base nos seus filhos ou descendentes. Por isso ele ficou conhecido como o "parent selector" — o seletor de pai que o CSS nunca teve.

Como funciona?

O :has() recebe um seletor como argumento e faz o elemento "pai" corresponder somente se pelo menos um descendente combinar com esse seletor:

.card:has(img) {
    border: 2px solid #12A8C3;
}

Nesse exemplo, apenas os elementos .card que contêm uma img em algum lugar dentro deles recebem a borda.

Exemplo prático: formulário com campo inválido

Antes do :has(), estilizar um formulário inteiro quando havia um campo inválido exigia JavaScript. Agora é só CSS:

form:has(input:invalid) {
    border: 2px solid #DB4551;
    background: #FFF5F5;
}

Exemplo prático: label baseado em checkbox marcado

label:has(input:checked) {
    color: #12A8C3;
    font-weight: bold;
}

Isso permite criar componentes como cards de seleção, listas de opções e checkboxes estilizados sem depender de JavaScript para controlar o estado visual.

Combinando com outros seletores

O :has() pode ser combinado com irmãos e outros seletores para casos ainda mais específicos:

h2:has(+ p.destaque) {
    margin-bottom: 4px;
}

Aqui, o h2 só é afetado quando é imediatamente seguido por um parágrafo com a classe destaque.

Quando usar

• Estilizar um container com base no conteúdo que ele possui (imagem, ícone, quantidade de itens).
• Validação visual de formulários sem JavaScript.
• Componentes de seleção (cards, checkboxes, radios) reagindo ao estado interno.
• Reduzir a necessidade de adicionar/remover classes via JS só para mudar um estilo.

Compatibilidade

O suporte já é excelente nos navegadores modernos (Chrome, Edge, Firefox e Safari), o que torna o :has() seguro para usar em produção na maioria dos projetos atuais.

caniuse

Conclusão

O :has() muda a forma como pensamos em seletores CSS, permitindo estilizar elementos com base no que existe dentro deles. É uma ferramenta poderosa para reduzir JavaScript desnecessário e escrever CSS mais expressivo.