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

CSS Specificity Calculator

Calculate and compare CSS selector specificity. Instantly see the (A,B,C) breakdown, visualize with bar charts, and understand which selector wins when styles conflict.

CSS SelectorsOne selector per line

Quick examples:

How CSS specificity works:

A — ID selectors (#id): each counts as 100

B — Class (.cls), attribute ([attr]), pseudo-class (:hover): each counts as 10

C — Type elements (div, p), pseudo-elements (::before): each counts as 1

How to Use

Calculate and compare CSS selector specificity. Instantly see the (A,B,C) breakdown, visualize with bar charts, and understand which selector wins when styles conflict.

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.

Key Features

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

Frequently Asked Questions

Learn More

CSS Specificity Explained: How to Debug and Win Selector Conflicts