AZ Tools

Testador de seletores CSS

Desenvolvimento

Cole HTML e um seletor CSS para ver na hora todos os elementos que o seletor encontra, com a contagem e a marcação de cada elemento correspondente. Usa o próprio motor de seletores do navegador, então os resultados são idênticos ao document.querySelectorAll — ótimo para depurar scrapers, folhas de estilo e seletores de teste. Seletores inválidos são sinalizados. Tudo roda localmente no seu navegador — nada é enviado.

Como usar

  1. Cole seu HTML na primeira caixa.
  2. Digite um seletor CSS (por exemplo li.item ou a[href^="https"]).
  3. Veja a contagem de correspondências e cada elemento correspondente; copie-os se precisar.

Perguntas frequentes

Quais seletores são suportados?
Qualquer seletor que seu navegador suporte via querySelectorAll, incluindo combinadores, seletores de atributo, :not(), :nth-child() e mais. Pseudo-elementos como ::before não correspondem a nada, como no DOM.
Os resultados são precisos?
Sim. O HTML é analisado em um documento real e consultado com o motor de seletores nativo do navegador, então as correspondências são exatamente o que querySelectorAll retornaria nessa marcação.
E se meu seletor for inválido?
O campo do seletor é destacado e uma mensagem de erro é exibida, em vez de retornar resultados enganosos.
Meu HTML é enviado para algum lugar?
Não. A análise e a correspondência ocorrem inteiramente no seu navegador; nada é enviado.

Ferramentas relacionadas