Testador de seletores CSS
Testa seletores contra HTML.
Sobre esta ferramenta
O testador aplica um seletor CSS a uma amostra curta de HTML e lista as correspondências encontradas. A análise acontece localmente com DOMParser, pelo que nada sai do browser do utilizador.
Como usar
Altere o seletor e a amostra de HTML, execute o teste e confirme o número de correspondências junto dos fragmentos devolvidos.
Exemplo
A amostra tem um cartão com título filho e um irmão sem a classe aplicada.
Entrada
div.card > h2Saída
1 match(es): <h2>…</h2>Dica
É uma boa forma de mostrar :nth-child ou a diferença entre combinador filho e descendente.
Bom saber
O meu HTML é enviado para algum lado?
Não. O exemplo é analisado com o DOMParser do próprio browser nesta página e o seletor corre com querySelectorAll.
Porque é que um seletor válido devolve zero correspondências?
Normalmente um combinador ou nome de classe está um nível ao lado. Verifique filho (>) versus descendente (espaço) e compare a grafia da classe com a sua marcação de exemplo.