Usa el Probar Selectores CSS gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Por Qué Conviene Probar un Selector Antes de Usarlo
Un selector CSS es un patrón corto que elige elementos de una página, por ejemplo todos los párrafos dentro de una tarjeta, o cada segunda fila de una lista. Los selectores se usan en hojas de estilo, en automatización del navegador, en scripts de extracción de datos y en herramientas de pruebas, y un pequeño error puede elegir los elementos equivocados o ninguno en absoluto, sin ningún aviso. Esta herramienta te permite comprobar un selector con el HTML que pegues, antes de que toque un sitio real o una hoja de estilo real.
La regla de seguridad clave es que tu HTML nunca se convierte en una página activa. El selector solo se aplica al documento que pegaste, dentro de un marco de vista previa aislado donde los scripts están bloqueados. Eso significa que un fragmento pegado no puede ejecutar código, abrir ventanas ni alcanzar otras páginas. Puedes probar selectores con HTML copiado de una página en la que trabajas, de una plantilla que estás creando o de un ejemplo de un tutorial, y ver exactamente qué elementos coinciden.
Cómo Usarlo
Empieza con el HTML de ejemplo que ya está en el cuadro, o reemplázalo con tu propio fragmento. Luego escribe tu selector y pulsa el botón de probar. La herramienta cuenta las coincidencias y muestra las veinte primeras, con su etiqueta y un trozo de su texto, para que veas de un vistazo si el selector encontró lo que esperabas.
- Pega o escribe el HTML que quieres probar en el cuadro de HTML.
- Escribe un selector CSS, por ejemplo .card p, ul li.hot, o div > p:first-child.
- Pulsa Probar selector y lee el número de coincidencias en la parte superior del resultado.
- Revisa las coincidencias: etiqueta, texto y orden deben coincidir con lo que esperabas.
- Si no hay coincidencias, simplifica el selector pieza por pieza hasta que aparezcan, y luego reconstrúyelo.
- Usa el botón de ejemplo para ver un caso que funciona, y luego adapta el selector a tu caso.
Un Ejemplo Práctico
Supón que tu HTML tiene una tarjeta con dos párrafos y una lista con tres elementos, uno marcado como hot. El selector .card p coincide con ambos párrafos dentro de la tarjeta y con ningún otro, que es justo lo que quieres si planeas dar estilo al texto de la tarjeta. El selector li.hot coincide solo con el segundo elemento de la lista, mientras que li solo coincide con los tres. Probar ambos uno al lado del otro muestra la diferencia entre un selector de clase, que reduce el resultado, y un selector de etiqueta, que toma todo lo de ese tipo.
Consejos Que Ahorran Tiempo
- Prueba primero la versión más simple, y luego añade una pieza cada vez: etiqueta, clase, y después un combinador de hijo o descendiente.
- Usa un punto para las clases y una almohadilla para los ids. Confundirlos es la razón más común de que un selector no devuelva nada.
- Revisa también el orden de las coincidencias. Muchos scripts y estilos dependen de la primera coincidencia, no solo del total.
- Si un selector funciona aquà pero no en tu sitio, revisa errores de escritura en los nombres de clase y elementos añadidos después por JavaScript.
- Guarda los selectores que verificaste aquÃ, para reutilizarlos en tu hoja de estilo o script con confianza.
Errores Comunes Que Debes Evitar
El error más común es escribir un selector de memoria y confiar en él sin probarlo, y luego preguntarse por qué un estilo o script afecta a la parte equivocada de la página. Otro es olvidar que un espacio significa descendiente, mientras que el signo mayor que significa solo hijo directo, asà que div p y div > p pueden devolver conjuntos muy distintos. Un tercero es probar con un HTML antiguo: si pegas una versión vieja de tu código, un selector correcto puede parecer roto. Pega siempre el código actual y vuelve a probar después de cambiarlo.
Preguntas Frecuentes
¿Esta herramienta ejecuta scripts de mi HTML pegado? No. El marco de vista previa está aislado con los scripts bloqueados, y el selector solo se aplica a tu documento pegado, asà que el código pegado no puede ejecutarse.
¿Por qué mi selector no coincide con nada? Normalmente una clase o un id está mal escrito, falta un punto o una almohadilla, o la estructura es distinta de la que suponÃas. Simplifica el selector hasta que coincida y luego reconstrúyelo paso a paso.
Un selector probado aquà es un selector en el que puedes confiar. Pega tu HTML, prueba tu patrón, y solo entonces úsalo en tu hoja de estilo, script o conjunto de pruebas.