Toolinix – simple online developer tools

Probador de selectores CSS

Todas las herramientas

Selector CSS

HTML

Resumen

Coincidencias
0
Estado
Inactivo
La vista previa se ejecuta en un frame sandboxed. Los elementos coincidentes se resaltan y numeran.

Vista previa de coincidencias

Elementos coincidentes

Pruebe un selector para ver 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

  1. Pegue HTML en el campo HTML.
  2. Ingrese el selector CSS que desea probar.
  3. 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.

Herramientas relacionadas

Estas herramientas también pueden resultarle útiles.

Calculadora de especificidad CSS
Calcule y compare puntuaciones de especificidad de selectores CSS.
Utilidades varias
›
Minificador/embellecedor de CSS
Minimice CSS para reducir el tamaño del archivo o embellezca CSS comprimido para facilitar la lectura.
Utilidades varias
›
HTML Minifier / Beautifier
Compress and format HTML code instantly.
SEO y webmaster
›
Probador de expresiones regulares
Pruebe expresiones regulares con texto y vea coincidencias al instante.
Texto y contenido
›
Generador de cuadrícula CSS
Cree diseños de cuadrícula CSS con columnas, filas, espacios, alineación, vista previa en vivo y CSS listo para copiar.
Utilidades varias
›

Preguntas frecuentes sobre el probador de selectores CSS

¿Soporta selectores CSS modernos?
Soporta los selectores disponibles en la implementación querySelectorAll de su navegador.
¿Puedo probar selectores de atributos?
Sí. Los selectores de atributos como [data-state='active'] son compatibles.
¿El HTML ejecuta scripts?
No. La vista previa se renderiza en un frame sandboxed y el contenido tipo script se elimina antes de mostrarla.
¿Por qué falla un selector?
El selector puede ser inválido, no estar soportado por el navegador actual o simplemente no coincidir con el HTML suministrado.