Probador de selectores CSS
Entrada de HTML
Coincidencias
Detalles técnicos
Cómo funciona el probador de selectores CSS
Qué hace la herramienta
El probador de selectores CSS evalúa selectores CSS contra una entrada HTML y resalta visualmente todos los elementos coincidentes. Pegas o escribes HTML en un panel, ingresas un selector CSS y al instante ves qué elementos coinciden con un conteo del total de coincidencias. Esto brinda retroalimentación inmediata sobre la especificidad y el alcance del selector sin necesidad de abrir las DevTools del navegador ni modificar una página en vivo.
Casos de uso comunes para desarrolladores
Los desarrolladores frontend usan esta herramienta para crear selectores precisos para estilos, probar selectores de scraping contra HTML de ejemplo antes de escribir código de extracción y depurar por qué una regla CSS no está apuntando a los elementos previstos. Los ingenieros de QA validan selectores de Cypress o Playwright contra capturas de página. También es útil para escribir reglas de extracción de contenido para lectores RSS, analizadores de correo electrónico o scripts de automatización de navegadores sin interfaz.
Formatos, tipos o variantes de datos
La herramienta admite la especificación completa de CSS Selectors Level 3, incluidos selectores de tipo, selectores de clase e ID, selectores de atributos con operadores ([attr^=value], [attr$=value]), pseudoclases (:nth-child, :not, :first-of-type), combinadores (descendiente, hijo >, hermano adyacente +, hermano general ~) y pseudoelementos (::before, ::after). Los selectores compuestos complejos y las listas de selectores (separadas por comas) son totalmente compatibles.
Errores comunes y casos límite
La coincidencia de selectores CSS depende de la estructura del DOM analizada, no del texto HTML sin procesar — etiquetas sin cerrar, elementos implícitos (tbody) y la corrección de errores del navegador pueden hacer que el DOM real difiera de lo que ves en el código fuente. Los pseudoelementos (::before, ::after) no son nodos reales del DOM y no pueden seleccionarse con querySelector. Los prefijos de espacio de nombres en contenido XML/SVG requieren un manejo especial. Los selectores demasiado específicos que funcionan con HTML de ejemplo pueden fallar en páginas de producción con un marcado ligeramente diferente.
Cuándo usar esta herramienta vs código
Usa esta herramienta del navegador para el desarrollo interactivo de selectores y la validación rápida contra fragmentos de HTML. Para scraping web en producción o automatización de pruebas, usa las pruebas de selectores integradas de tu framework (page.locator de Playwright, page.$ de Puppeteer), que se ejecutan contra el DOM renderizado real con ejecución de JavaScript, contenido dinámico, recorrido del shadow DOM y manejo de iframes que la coincidencia de HTML estático no puede replicar.