Testador CSS :has()

Gratuito DevTools

Testador CSS :has()

Cole seu HTML e um seletor CSS com :has() para ver quais elementos correspondem em tempo real. Ideal para aprender e depurar o seletor parente do CSS moderno.

3.2k usuarios Atualizado em Mar 2026 4.7/5

Avalie esta ferramenta:

4.7 (541 votos) Obrigado!

Testador de Seletor :has()

Seletor CSS com :has()

Exemplos de seletores

HTML de entrada

<div class="card">
  <p class="highlight">Paragrafo com destaque</p>
  <span>Outro conteudo</span>
</div>
<div class="card">
  <p>Paragrafo comum</p>
</div>
<ul>
  <li class="active">Item ativo</li>
  <li>Item normal</li>
</ul>
<form>
  <input type="text" required>
  <button>Enviar</button>
</form>

Visualizacao (verde = match)

Referencia Rapida :has()

A:has(B)

A que contem B como descendente

A:has(> B)

A que tem B como filho direto

A:has(+ B)

A seguido imediatamente por B

A:has(:checked)

A que contem input marcado

A:not(:has(B))

A que NAO contem B

A:has(B, C)

A que contem B ou C

Como Usar

Teste qualquer seletor :has() em segundos.

Digite o seletor

Insira um seletor CSS usando :has() no campo superior, ou clique em um dos exemplos.

Cole seu HTML

Insira o HTML que deseja testar na area de texto da esquerda.

Veja os matches

Os elementos correspondentes sao destacados em verde na previa a direita.

Consulte a referencia

Use o guia rapido abaixo do testador para explorar as variantes do :has().

Sobre o seletor :has()

O :has() e considerado o "seletor parente" do CSS. Ele permite selecionar um elemento com base no que esta contido dentro dele, algo impossivel com CSS tradicional.

Suportado em todos os navegadores modernos (Chrome 105+, Safari 15.4+, Firefox 121+)
Pode combinar com outros seletores como :not(), :is() e :where()
Util para estilizar formularios com base no estado dos inputs filhos
Permite criar layouts condicionais sem JavaScript

Artigo

CSS :has() — O Seletor Parente que Mudou o CSS

Chipak Tools • Mar 2026 • 7 min de leitura

Neste artigo

O que e o seletor :has()
Como funciona na pratica
Casos de uso reais
Combinacoes avancadas
Suporte nos navegadores
Como usar este testador

O que e o seletor :has()

O :has() e uma pseudo-classe CSS que seleciona um elemento se qualquer dos seletores passados como argumento corresponder a um descendente (ou parente relativo) deste elemento. Por muitos anos a comunidade CSS pediu um "seletor parente" e o :has() entregou exatamente isso.

Antes do :has(), para mudar o estilo de um elemento pai com base nos seus filhos era preciso usar JavaScript. Hoje e possivel fazer isso puramente em CSS.

Como funciona na pratica

A sintaxe basica e seletor:has(argumento). O argumento e avaliado em relacao ao elemento selecionado como origem. Por exemplo, div:has(p) seleciona todos os <div> que contem pelo menos um <p> em qualquer nivel de profundidade.

Use > para limitar a busca ao filho direto: div:has(> p) so corresponde se o <p> for filho imediato do <div>.

Casos de uso reais

O :has() resolve problemas que antes exigiam JavaScript:

Destacar uma linha de tabela inteira quando uma celula especifica esta marcada com checkbox
Mudar o layout de um card com base na presenca de uma imagem
Estilizar um label de formulario quando o input associado esta invalido ou em foco
Ocultar uma secao quando ela esta vazia (sem filhos)
Aplicar estilos em um artigo com base na presenca de certas classes filhas

Combinacoes avancadas

O :has() pode ser combinado com outras pseudo-classes para criar seletores muito precisos. :not(:has(img)) seleciona elementos que nao contem imagens. :has(:checked) permite estilizar um wrapper de acordo com o estado de um checkbox interno.

Voce tambem pode passar multiplos seletores separados por virgula: :has(h2, h3) corresponde a elementos que contem h2 OU h3.

Suporte nos navegadores

O :has() tem suporte amplo desde 2023: Chrome 105+, Edge 105+, Safari 15.4+ e Firefox 121+. Para projetos que precisam suportar versoes antigas, considere usar JavaScript como fallback ou verificar o suporte com @supports selector(:has(*)).

Como usar este testador

O testador da Chipak executa o seletor diretamente no navegador usando querySelectorAll(), que implementa a mesma logica do motor CSS. Cole seu HTML no painel esquerdo, escreva o seletor e veja os matches destacados em verde na previa a direita.