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).

Calculateur de spécificité CSS

Calculez et comparez la spécificité des sélecteurs CSS. Voyez instantanément la décomposition (A,B,C), visualisez avec des graphiques et comprenez quel sélecteur l'emporte en cas de conflit.

Sélecteurs CSSUn sélecteur par ligne

Exemples rapides:

Comment fonctionne la spécificité CSS :

A — Sélecteurs ID (#id) : chacun compte pour 100

B — Classe (.cls), attribut ([attr]), pseudo-classe (:hover) : chacun compte pour 10

C — Éléments de type (div, p), pseudo-éléments (::before) : chacun compte pour 1

Comment utiliser

Calculez et comparez la spécificité des sélecteurs CSS. Voyez instantanément la décomposition (A,B,C), visualisez avec des graphiques et comprenez quel sélecteur l'emporte en cas de conflit.

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.

Fonctionnalités

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

Questions fréquentes

En savoir plus

CSS Specificity Explained: How to Debug and Win Selector Conflicts