Testador de seletores CSS

Teste seletores CSS em um HTML colado e veja cada elemento correspondente com a marcação e o texto. Usa o querySelectorAll, então os resultados são idênticos aos do navegador.

Seletor CSS

Código HTML

O HTML é interpretado com DOMParser e consultado com querySelectorAll, exatamente como no seu navegador (o suporte a CSS Selectors Level 4 depende do navegador). Scripts do HTML colado não são executados.

O que é Testador de seletores CSS?

O testador de seletores CSS executa um seletor em um HTML que você colar e lista cada elemento correspondente com o outer HTML e o conteúdo de texto. Ele suporta tudo o que o seu navegador suporta, de seletores de atributo a :not(), :is(), :has() e :nth-child().

Como usar Testador de seletores CSS

Digite um seletor CSS, por exemplo nav li:not(.active) > a[href^="/"].
Cole ou edite o HTML.
Leia o número de correspondências e a marcação destacada de cada uma.
Copie todo o HTML correspondente com o botão Copiar.

Exemplo

Entrada

nav li:not(.active) > a[href^="/"] on the sample HTML

Saída

1 match: <a href="/blog" data-track="nav">Blog</a>

a[href] corresponde aos 4 links do exemplo.

Quando usar Testador de seletores CSS

Use para escrever seletores para regras CSS, automação de testes (Playwright, Cypress), web scraping ou chamadas document.querySelector. A ferramenta não aplica estilos nem calcula especificidade, e pseudoclasses dinâmicas como :hover nunca correspondem em um documento estático.

Como funciona Testador de seletores CSS

O HTML é interpretado em um documento separado com o DOMParser (scripts não são executados) e o seletor é passado para querySelectorAll(). A correspondência é, portanto, exatamente a do seu navegador, incluindo o nível de suporte a recursos mais novos do Selectors Level 4. Seletores inválidos são capturados e informados. Até 200 correspondências são exibidas.