Probador de Selectores CSS

Pega un fragmento de HTML a la izquierda y un selector CSS a la derecha. Los elementos coincidentes se resaltan en el marco de vista previa y una fila por coincidencia te dice la etiqueta, el id, las clases, una vista previa del texto y una ruta corta. Puro en el navegador — la vista previa está aislada, nada se sube.

Los scripts, estilos y manejadores de eventos inline se eliminan antes de montar la vista previa.

Sintaxis estándar de selectores CSS. Se admiten listas separadas por comas.

0 coincidencias
— evaluado en
0 elementos totales
0 etiquetas distintas
Vista previa en vivo Los elementos coincidentes están resaltados.
Lista de coincidencias Pulsa una fila para enfocar su elemento en la vista previa.

    Chuleta de selectores

    Un recordatorio de los patrones más útiles. Todo lo de abajo también funciona como lista por comas (p. ej. h1, h2, h3).

    • div — nombre de etiqueta
    • .nota — clase
    • #principal — id
    • div.nota — etiqueta con clase
    • ul > li — hijo directo (sin descendientes)
    • article p — descendiente (cualquier profundidad)
    • li:first-child / :last-child / :nth-child(2)
    • a[href^="https"] — atributo que empieza por
    • a[href$=".pdf"] — termina en
    • input[type="checkbox"]:checked — inputs marcados
    • p:not(.lead) — negación
    • h1, h2, h3 — lista por comas (cualquiera de estos)