Testador de seletores CSS
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
- Cole HTML no campo HTML.
- Digite o seletor CSS que deseja testar.
- 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.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Calculadora de especificidade CSS
Calcule e compare pontuações de especificidade de seletores CSS.
Utilitários Diversos
›
Minificador / embelezador CSS
Minimize o CSS para reduzir o tamanho do arquivo ou embeleze o CSS compactado para facilitar a leitura.
Utilitários Diversos
›
HTML Minifier / Beautifier
Compress and format HTML code instantly.
SEO e Webmaster
›
Testador Regex
Teste expressões regulares em relação ao texto e veja as correspondências instantaneamente.
Texto e Conteúdo
›
Gerador de grade CSS
Crie layouts de grade CSS com colunas, linhas, lacunas, alinhamento, visualização ao vivo e CSS pronto para cópia.
Utilitários Diversos
›
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.