Probador de selectores CSS
Prueba selectores contra HTML.
Sobre esta herramienta
Prueba un selector CSS contra una muestra breve de HTML y muestra las coincidencias encontradas. Todo el análisis se hace en el navegador con DOMParser, sin enviar nada a un servidor.
Cómo usar
Ajusta el selector y el HTML de muestra, ejecuta la prueba y revisa el número de coincidencias junto a los fragmentos detectados.
Ejemplo
El HTML de muestra tiene una tarjeta con título hijo y otra hermana sin la clase.
Entrada
div.card > h2Salida
1 match(es): <h2>…</h2>Consejo
Es una forma muy clara de explicar :nth-child o la diferencia entre combinador hijo y descendiente.
Conviene saber
¿Mi HTML se envía a algún sitio?
No. La muestra se analiza con el DOMParser del propio navegador en esta página y el selector se ejecuta con querySelectorAll.
¿Por qué un selector válido devuelve cero coincidencias?
Normalmente un combinador o un nombre de clase está desviado un nivel. Revisa hijo (>) frente a descendiente (espacio) y compara la ortografía de la clase con tu marcado de ejemplo.