Cómo usar esta herramienta para desarrolladores
- Pega un fragmento HTML.
- Escribe el selector que quieres probar.
- Ejecuta la consulta.
- Revisa las coincidencias y sus rutas aproximadas.
CSS Selector Tester
Prueba un selector CSS contra un fragmento HTML y devuelve los elementos que coinciden. Puedes cambiar el selector sin modificar el HTML, ver una ruta descriptiva de cada coincidencia y detectar selectores inválidos mediante querySelectorAll del propio navegador.
Datos de entrada
HTML donde probar el selectorEspacio publicitario
Qué hace esta herramienta para desarrolladores
Carga el HTML en un documento inerte con DOMParser y ejecuta querySelectorAll(selector). No ejecuta scripts del fragmento.
La validez y semántica del selector las determina el motor CSS del navegador. Para cada coincidencia se genera una ruta legible usando etiqueta, id y hasta dos clases.
Los selectores dependen del soporte del navegador actual; pseudoclases ligadas al estado interactivo pueden no tener sentido en un documento inerte.
Ejemplo
Selector: .card:not(.featured) a
Coincide con el enlace dentro del segundo article.
Casos de uso
- Depurar selectores de scraping en el navegador.
- Verificar selectores antes de usarlos en tests.
- Explorar una plantilla HTML.
- Comprobar :not(), atributos y combinadores.
Consejos para obtener resultados fiables
- Usa selectores lo bastante específicos, pero no más.
- Recuerda que :hover y :focus dependen de estado.
- Los scripts pegados no se ejecutan.
- Prueba primero una parte del selector si no hay coincidencias.
Detalles del procesamiento
DOMParser crea un documento separado y querySelectorAll aplica el selector. Las rutas de salida son descriptivas y no pretenden ser selectores únicos garantizados.
No reproduce Shadow DOM, estilos, layout, iframes ni contenido añadido por JavaScript.
Preguntas frecuentes
¿Qué tipo de entrada acepta CSS Selector Tester?
Acepta un fragmento HTML y un selector compatible con querySelectorAll.
¿Cómo trata CSS Selector Tester el HTML o CSS no válido?
Un selector CSS inválido produce un error de sintaxis y no se ejecuta parcialmente.
¿Los datos que pego en CSS Selector Tester se envían a un servidor?
No. El procesamiento principal se ejecuta localmente en el navegador y no necesita una API externa.
¿Puedo usar el resultado de CSS Selector Tester directamente en mi proyecto?
Sí, pero conviene revisarlo cuando la entrada contenga sintaxis ambigua, fragmentos incompletos o datos generados por terceros.
¿Funciona CSS Selector Tester con texto Unicode y caracteres acentuados?
Sí. La herramienta trabaja con cadenas JavaScript y conserva Unicode; en descargas utiliza UTF-8.
Herramientas relacionadas para desarrolladores
Resumen técnico
| Módulo | Función |
|---|---|
| Entrada | HTML donde probar el selector |
| Procesamiento | Local en el navegador |
| Salida | .json y exportaciones cuando corresponda |
Explora la categoría HTML, CSS y JavaScript
Consulta más utilidades para inspeccionar, transformar y validar código del navegador.