Probador de selectores CSS
Prueba selectores CSS sobre el HTML que pegues y ve cada elemento coincidente con su marcado y texto. Usa querySelectorAll, así que coincide exactamente con el navegador.
¿Qué es Probador de selectores CSS?
El probador de selectores CSS ejecuta un selector sobre el HTML que pegas y lista cada elemento coincidente con su outer HTML y su contenido de texto. Admite todo lo que admite tu navegador, desde selectores de atributo hasta :not(), :is(), :has() y :nth-child().
Cómo usar Probador de selectores CSS
- Introduce un selector CSS, p. ej.
nav li:not(.active) > a[href^="/"]. - Pega o edita el HTML.
- Consulta el número de coincidencias y el marcado resaltado de cada una.
- Copia todo el HTML coincidente con el botón Copiar.
Ejemplo
nav li:not(.active) > a[href^="/"] on the sample HTML
1 match: <a href="/blog" data-track="nav">Blog</a>
a[href] coincide con los 4 enlaces del ejemplo.
Cuándo usar Probador de selectores CSS
Úsalo para escribir selectores para reglas CSS, automatización de pruebas (Playwright, Cypress), web scraping o llamadas a document.querySelector. No aplica estilos ni calcula la especificidad, y las pseudoclases dinámicas como :hover nunca coinciden en un documento estático.
Cómo funciona Probador de selectores CSS
El HTML se analiza en un documento independiente con DOMParser (los scripts no se ejecutan) y el selector se pasa a querySelectorAll(). Por tanto, las coincidencias son exactamente las que daría tu navegador, incluido su nivel de compatibilidad con las funciones más recientes de Selectors Level 4. Los selectores no válidos se detectan y se notifican. Se muestran hasta 200 coincidencias.
Casos de Uso Comunes
- Comprobar que un localizador de Playwright coincide exactamente con un botón.
- Crear un selector de scraper para los precios de productos.
- Aprender cómo se comportan los combinadores (>, +, ~) y :not().
- Comprobar si tu navegador admite :has().
Preguntas Frecuentes
¿Por qué mi selector no coincide con nada en una página extraída?
Puede que la página construya su HTML con JavaScript. Pega el HTML renderizado desde DevTools (Copy outerHTML), no el código fuente original.
¿Se admite :has()?
Sí en las versiones actuales de Chrome, Edge, Safari y Firefox. El probador usa tu navegador, así que los navegadores antiguos lo marcan como no válido.
¿Muestra la especificidad?
No, solo muestra qué elementos coinciden.