Escribe un selector por línea para comparar su especificidad; las listas con comas se dividen por selector. Los no válidos se marcan y !important o las capas aún deciden.
Se ejecuta localmente en tu navegadorCada selector se puntúa con los tres contadores de la especificación: A para selectores de ID, B para clases, atributos y pseudoclases, C para selectores de tipo y pseudoelementos. Los tres ejemplos ya muestran la forma del resultado: #app .card:hover > h2 es 1-2-1, :where(.theme) .card:is(.featured, #hero) es 1-1-0 y main article[data-kind="docs"]::before es 0-1-3.
Los selectores se validan con el propio analizador del navegador y se puntúan dentro de la página, así que no se envía nada. La línea sobre el mapa indica cuántos selectores se leyeron y cuál es el más fuerte; el bloque de copia repite cada puntuación en texto plano.
A cuenta los selectores de ID como #app. B cuenta las clases (.card), los selectores de atributo ([data-kind="docs"]) y las pseudoclases (:hover, :focus-visible, :nth-child(2n+1)). C cuenta los selectores de tipo (main, article, h2) y los pseudoelementos (::before, ::selection). El selector universal * no suma nada en ninguna columna.
Las pseudoclases funcionales siguen la especificación: :where() aporta cero, mientras que :is(), :not(), :has() y la lista of de :nth-child() se puntúan por su argumento más pesado; por eso :is(.featured, #hero) vale un ID. ::part() y ::slotted() cuentan como un pseudoelemento cada uno y su argumento no suma nada.
Una lista separada por comas en una línea se trata como lo que es: varios selectores. a, b se convierte en dos filas de 0-0-1. Cada fila se valida antes con el analizador del navegador; la que rechaza —un combinador suelto, tres dos puntos— sigue apareciendo, marcada como Selector no válido, y queda fuera del veredicto de mayor especificidad, porque un selector no válido nunca llega a la cascada.
La puntuación responde a una pregunta: si dos de estos selectores coinciden con el mismo elemento, qué declaración gana por peso. Las capas, !important, los estilos en línea, el orden de aparición y la proximidad de ámbito pueden anular la aritmética; una puntuación menor dentro de una @layer anterior puede ganar.
Toda la comparación ocurre en la pestaña, así que los selectores no se envían a ningún sitio. No hay un límite fijo de líneas; el mapa, la línea de veredicto y el bloque de copia se reconstruyen juntos mientras escribes.
La herramienta compara texto, no aplica tu hoja de estilo: no casa nada contra un documento y los números son los pesos de la especificación, no una predicción del estilo calculado. Para una comprobación visual, ejecuta el selector en el inspector del navegador sobre la página real.