:has(): pseudo-classe relacional

A pseudoclasse :has() seleciona um elemento se ele contiver um descendente que corresponda ao argumento. Frequentemente chamada de "seletor pai", ela permite estilizar um elemento pai com base em seus filhos — uma capacidade que o CSS nunca teve antes.

.card:has(img) seleciona qualquer elemento .card que contenha um descendente img. O argumento é uma lista de seletores relativos — qualquer seletor CSS válido que descreva elementos em relação ao elemento de referência.

Estilize um contêiner de formulário quando ele tiver um campo de entrada inválido: form:has(:invalid) { border-color: red; }. Estilize uma seção que contenha um título: section:has(h2) { padding-top: 2rem; }. O elemento pai muda de aparência com base no estado do filho.

:has() pode selecionar irmãos anteriores — algo que + e ~ não conseguem fazer. h2:has(+ p) seleciona elementos h2 imediatamente seguidos por p. li:has(~ .active) seleciona elementos li que têm um irmão .active posterior.

Reaja à validade nativa do formulário sem JavaScript: input:has(~ .error-msg) estiliza um campo de entrada que tem uma mensagem de erro como irmão. label:has(+ input:required) estiliza rótulos cujo campo de entrada associado é obrigatório — tudo apenas com CSS.

Destaque contêineres de navegação com base no filho ativo: nav:has(.active) aplica estilos a toda a navegação quando qualquer filho tem a classe active. Isso é útil para indicar qual seção da navegação está atual no nível do contêiner.

.grid:has(.card:focus-within) estiliza toda a grade quando qualquer cartão recebe foco pelo teclado. .dropdown:has(:hover) mantém um menu suspenso aberto enquanto o ponteiro está sobre qualquer descendente — uma alternativa mais simples que cadeias complexas de combinadores de irmãos.

.sidebar:has(nav) aplica uma estrutura diferente de .sidebar:not(:has(nav)). Estrutura condicional sem JavaScript: a presença ou ausência de filhos específicos determina a estrutura do elemento pai, permitindo um CSS verdadeiramente adaptável e orientado pelo conteúdo.

:has() com seletores de argumento abrangentes (por exemplo, :has(*)) pode ser custoso — o navegador precisa verificar cada elemento. Mantenha os argumentos de :has() específicos. Prefira :has(> .specific-child) (filho direto) a :has(.specific-child) (qualquer descendente) quando possível.

:has() é compatível com Chrome 105+, Safari 15.4+ e Firefox 121+. Tem compatibilidade ampla desde o final de 2023. Não existe um polyfill (seria necessário usar JavaScript para simulá-lo); use-o com aprimoramento progressivo em navegadores mais antigos, nos quais o recurso não seja essencial.

Padrões que antes exigiam ouvintes de eventos em JS: "adicionar uma classe ao pai quando o filho recebe foco", "mostrar uma sobreposição quando modal-trigger existe", "estilizar uma grade de modo diferente quando ela tem exatamente três itens". :has() trata todos esses casos de forma declarativa.

O que torna :has() único em comparação com combinadores CSS existentes, como + e ~?

:has() é a primeira pseudoclasse relacional realmente expressiva do CSS, permitindo selecionar elementos pai e irmãos anteriores. Ela possibilita estilização orientada pelo conteúdo, reações ao estado de formulários, destaque da navegação e muitos padrões que antes exigiam manipulação do DOM com JavaScript — tudo de forma declarativa no CSS.