What is CSS specificity?

CSS specificity is a weight assigned to a CSS selector that determines which rule is applied when multiple rules target the same element. It's calculated as a three-part value (A, B, C): A counts ID selectors (most powerful), B counts class/attribute/pseudo-class selectors, and C counts element type and pseudo-element selectors. The selector with the highest total wins.

Why does (1,0,0) always beat (0,9,9)?

CSS specificity is not a simple decimal number — it's compared column by column from left to right. One ID (1,0,0) always beats any number of classes (0,9,9) because the A column is compared first. Think of it like version numbers: 1.0.0 > 0.9.9 even though 100 > 99 in regular math.

Does !important affect specificity?

!important is not a selector and does not change the (A,B,C) score. Instead, it creates a separate override layer that ignores specificity entirely. Inline styles also sit outside the normal specificity system — they have an effective (1,0,0,0) weight that overrides all stylesheet rules. Avoid using !important for maintainability.

What is the specificity of :not(), :is(), and :where()?

:not() itself adds no specificity, but the selectors inside it do. :is() uses the highest specificity of its argument list. :where() always has zero specificity — it's designed specifically for low-specificity matching, making it useful in utility-first CSS systems.

How can I reduce specificity wars in my CSS?

Common strategies include: using classes instead of IDs for styling, avoiding deeply nested selectors, keeping specificity flat with utility-first frameworks (Tailwind), using :where() for reusable base styles, and following a naming convention like BEM to keep selectors at a single class level (0,1,0).

Calculadora de especificidad CSS

Calcula y compara la especificidad de selectores CSS. Ve al instante el desglose (A,B,C), visualiza con gráficos de barras y entiende qué selector gana cuando los estilos entran en conflicto.

Selectores CSSUn selector por línea

Ejemplos rápidos:

Cómo funciona la especificidad CSS:

A — Selectores ID (#id): cada uno cuenta como 100

B — Clase (.cls), atributo ([attr]), pseudoclase (:hover): cada uno cuenta como 10

C — Elementos de tipo (div, p), pseudoelementos (::before): cada uno cuenta como 1

Cómo usar

Calcula y compara la especificidad de selectores CSS. Ve al instante el desglose (A,B,C), visualiza con gráficos de barras y entiende qué selector gana cuando los estilos entran en conflicto.

1Type or paste one or more CSS selectors — one per line.
2Click the quick-example buttons to add common selectors instantly.
3Click 'Calculate' (or press Ctrl+Enter) to see the specificity scores.
4Each result shows an (A,B,C) badge, a numeric total, and bar charts for visual comparison.
5Click 'Show breakdown' on any result to see which parts contributed to the score.

Características

Calculates (A,B,C) specificity breakdown for any CSS selector
Compare multiple selectors side by side, sorted by specificity
Visual bar charts for instant comparison of A, B, C values
Detailed breakdown explaining each contributing selector part
Handles IDs, classes, attributes, pseudo-classes, and pseudo-elements

Preguntas frecuentes

Más información

CSS Specificity Explained: How to Debug and Win Selector Conflicts