VoriTools

Probador de selectores CSS y especificidad

Pega el fragmento HTML y el selector. Las coincidencias dependen del navegador; el resumen no analiza toda la cascada.

Se ejecuta localmente en tu navegador
Ver categoría: Frontend y diseño (34)
Esta herramienta procesa todos los datos localmente en tu navegador.
Fragmento HTMLEl marcado se analiza en un documento aislado y nunca se ejecuta ni previsualiza.

Cómo probar un selector CSS sobre un fragmento HTML

Pega un fragmento HTML y un selector CSS y pulsa Probar selector. El fragmento se analiza en un documento aparte que nunca se añade a la página, y el selector se ejecuta con el querySelectorAll del propio navegador: un selector que coincide aquí es un selector que tu navegador acepta.

El resumen muestra la especificidad del grupo más específico, cuántos elementos coinciden y cuántos grupos separados por comas tiene el selector. Cada coincidencia aparece como etiqueta#id.clase con los primeros 150 caracteres de su texto.

  1. Pega el marcado que quieres consultar, o pulsa Cargar ejemplo para partir de un fragmento con main.app, dos article.card y un enlace a#download.
  2. Escribe el selector en el campo Selector CSS y pulsa Probar selector. El campo ya trae .card > a#download.
  3. Lee las tres tarjetas: especificidad como a,b,c, número de coincidencias y número de grupos del selector.
  4. Revisa las fichas. .card > a#download coincide con un elemento, a#download.button.primary, y bajo el nombre se imprime su texto, Download.
  5. Pulsa Limpiar para vaciar los dos campos y reiniciar los paneles.

Cómo leer el desglose de especificidad

Qué cuenta cada número de a,b,c

a cuenta selectores de ID, b cuenta clases, atributos y pseudoclases, y c cuenta selectores de tipo y pseudoelementos. El selector universal vale cero: * es 0,0,0, .card > a#download es 1,1,1, ul li::before es 0,0,3 y [href] es 0,1,0.

Con un selector separado por comas la tarjeta muestra el grupo más específico, que es el número que el navegador aplica a las declaraciones escritas en ese grupo: a, #b marca 1,0,0. Aquí no se pesan !important, el orden de @layer ni la herencia: son recuentos de especificidad, no una simulación de la cascada.

Los casos que se calculan mal con facilidad

:not(), :is() y :has() puntúan como su argumento más específico: :is(#a, .b) es 1,0,0, :not(.a) es 0,1,0 y :where(#a) es 0,0,0. :nth-child(2 of .a) suma la lista que sigue a of, así que vale 0,2,0.

Un carácter escapado permanece dentro de su identificador, por lo que .a\.b es una sola clase (0,1,0), y un prefijo de espacio de nombres no es un selector de tipo: svg|circle cuenta un tipo, no dos.

Lo que este probador no puede decirte

El fragmento se analiza sin hoja de estilos, así que no hay maquetación ni estados: p:hover, p:visited y p:focus no coinciden con nada. Los scripts del fragmento no se ejecutan y las imágenes no se descargan.

La coincidencia depende de tu navegador. Chrome rechaza svg|circle y [href i], y entonces la barra de estado muestra ese mensaje tal cual en lugar de un resultado. Los fragmentos largos se procesan enteros: una tabla de 400 filas produjo 400 fichas.

Herramientas recientes: