Probador de selectores CSS
Selector CSS
HTML
Resumen
Vista previa de coincidencias
Elementos coincidentes
Acerca del probador de selectores CSS
CSS Selector Tester comprueba un selector contra un bloque de HTML usando el motor nativo de selectores del navegador.
Es útil para depurar selectores complejos, verificar selectores de atributos, revisar markup anidado o confirmar qué coincidiría con querySelectorAll.
Cómo usar esta herramienta
- Pegue HTML en el campo HTML.
- Ingrese el selector CSS que desea probar.
- Haga clic en Probar selector para ver elementos coincidentes, rutas y una vista previa resaltada.
Consejos
- Use la calculadora de especificidad cuando varios selectores coincidentes compitan en la cascada.
- Los selectores inválidos son reportados por el parser del navegador.
- La vista previa está aislada, por lo que el markup pegado no ejecuta scripts.
Comprobaciones de selectores CSS antes de usar una consulta
Prueba selectores con markup representativo para encontrar los elementos previstos sin depender de estructuras frágiles.
Coincidencias positivas y negativas
Incluye elementos que deben coincidir, casos cercanos que no, componentes repetidos y contenedores vacíos u opcionales.
Estados dinámicos
Comprueba el markup antes y después del renderizado cliente, lazy loading, validación, navegación y cambios de estado.
Compatibilidad
Confirma soporte para :has(), namespaces, escaping y extensiones no estándar en el navegador o biblioteca de destino.
Hooks estables
Usa clases o data attributes intencionados para scripts y tests en vez de anidación visual o nombres generados.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.