Testador de seletores CSS

Todas as ferramentas

Seletor CSS

HTML

Resumo

Correspondências
0
Status
Inativo
A prévia roda em um frame sandboxed. Elementos correspondentes são destacados e numerados.

Prévia de correspondências

Elementos correspondentes

Teste um seletor para ver elementos correspondentes.

Sobre o testador de seletores CSS

CSS Selector Tester verifica um seletor contra um bloco de HTML usando o mecanismo nativo de seletores do navegador.

É útil para depurar seletores complexos, verificar seletores de atributos, revisar markup aninhado ou confirmar o que querySelectorAll encontraria.

Como usar esta ferramenta

  1. Cole HTML no campo HTML.
  2. Digite o seletor CSS que deseja testar.
  3. Clique em Testar seletor para ver elementos correspondentes, caminhos e uma prévia destacada.

Dicas

  • Use a calculadora de especificidade quando vários seletores correspondentes competirem na cascata.
  • Seletores inválidos são reportados pelo parser do navegador.
  • A prévia é sandboxed, então o markup colado não executa scripts.

Guias relacionados

Entenda o workflow por trás desta ferramenta e o que revisar depois.

Verificações de seletores CSS antes de usar uma consulta

Teste seletores com markup representativo para encontrar os elementos desejados sem depender de estruturas frágeis.

Correspondências positivas e negativas

Inclua elementos que devem corresponder, casos próximos que não, componentes repetidos e containers vazios ou opcionais.

Estados dinâmicos

Verifique o markup antes e depois de renderização cliente, lazy loading, validação, navegação e mudanças de estado.

Compatibilidade

Confirme suporte a :has(), namespaces, escaping e extensões não padrão no navegador ou biblioteca de destino.

Hooks estáveis

Use classes ou data attributes próprios para scripts e testes em vez de aninhamento visual ou nomes gerados.

Privacidade e uso

Verificações rápidas sem conta

Toolinix foi feito para tarefas curtas de desenvolvimento: cole uma amostra segura, revise o resultado, copie o que precisa e siga em frente.

Sem login

Você pode usar as ferramentas sem criar conta, assinar newsletter ou salvar um workspace.

Local quando possível

Formatadores, geradores, codificadores e utilitários de texto geralmente rodam no navegador. Diagnósticos de rede podem precisar de uma consulta assistida pelo servidor para verificar URLs, domínios ou IPs públicos.

Não cole segredos

Não cole senhas de produção, chaves privadas, tokens de acesso, dados de clientes ou dados regulados em ferramentas online, a menos que sua própria política de segurança permita.

Ferramentas relacionadas

Você também pode achar essas ferramentas úteis.

Perguntas frequentes sobre o testador de seletores CSS

Suporta seletores CSS modernos?
Suporta os seletores disponíveis na implementação querySelectorAll do seu navegador.
Posso testar seletores de atributos?
Sim. Seletores de atributos como [data-state='active'] são suportados.
O HTML executa scripts?
Não. A prévia é renderizada em um frame sandboxed e conteúdo semelhante a script é removido antes da exibição.
Por que um seletor falha?
O seletor pode ser inválido, não ser suportado pelo navegador atual ou simplesmente não corresponder ao HTML fornecido.