Calculadora de Especificidad CSS

Pega cualquier selector CSS y obtén su especificidad como tupla (a, b, c). Soporta :is(), :not(), :has(), :where(), :nth-child(… of …), selectores de atributo, pseudo-elementos y listas separadas por comas. Compara dos selectores en paralelo para ver cuál gana. Puro en el navegador, sin subir nada, sin rastreo.

Probar:
Selector A
—

a = IDs · b = clases, atributos, pseudo-clases · c = tipos y pseudo-elementos

Normalizado

—

Anatomía

  • Introduce un selector.

Desglose por selector

Cómo funciona la especificidad CSS
  • La tupla. Cada selector tiene una especificidad (a, b, c) donde a cuenta IDs, b cuenta clases, atributos y pseudo-clases, y c cuenta selectores de tipo y pseudo-elementos. El navegador compara tuplas de izquierda a derecha: un a más alto siempre gana; solo cuando a empata importa b, y así sucesivamente.
  • Los combinadores no cuentan. El combinador descendiente (espacio), el hijo (>), el hermano adyacente (+) y el hermano general (~) suman 0 a la especificidad. Solo los selectores simples en cada extremo contribuyen.
  • El selector universal es gratis. * aporta (0, 0, 0).
  • Pseudo-elementos. ::before, ::after, ::first-line, ::first-letter y ::selection cuentan como pseudo-elementos (el cubo c). Las formas antiguas con dos puntos :before, :after, :first-line, :first-letter se tratan idénticamente.
  • :is(), :not(), :has(). Cada uno añade una pseudo-clase a b Y la especificidad de su argumento más específico. Por tanto, :not(.foo, #bar) tiene la especificidad de :not() más #bar, no la suma.
  • :where() aporta 0. El envoltorio y todos sus argumentos son invisibles a la especificidad. Úsalo como un «opt-out» de especificidad para tematizar.
  • :nth-child(an+b of S). Añade una pseudo-clase a b Y la especificidad del selector más específico en la lista of. La expresión an+b no aporta nada.
  • Listas separadas por comas. Para A, B, C cada selector se calcula independientemente. La regla completa toma el máximo de la lista (lexicográficamente sobre la tupla). Mostramos la especificidad de cada selector en la tabla para que se vea por qué.
  • Los atributos cuentan como clases. [type="text"] y [data-foo~="bar"] suman 1 a b, independientemente del operador interno.
  • Nada sale de tu navegador. El analizador se ejecuta íntegramente del lado del cliente. Recarga la página y se borra todo.