CSS Specificity Calculator
Calculate the (a, b, c) specificity score of any CSS selector and compare two selectors.
Enter a CSS selector above to calculate its specificity score.
What Is CSS Specificity?
CSS specificity determines which rule wins when two selectors target the same element. It is calculated as a three-part score (a, b, c):
- a — ID selectors (
#id) - b — class selectors (
.class), attribute selectors ([attr]), and pseudo-classes (:hover) - c — type selectors (
div,p) and pseudo-elements (::before)
The universal selector * and combinators (>, +, ~) have zero specificity. !important overrides all specificity.
How to Use
- Enter a CSS selector in the input field — the (a, b, c) score updates instantly.
- Add a second selector to compare which one wins.
- Click any sample to load a preset selector.
Key Features
- Full (a, b, c) breakdown with visual bars
- Side-by-side comparison mode with winner highlight
- Handles pseudo-elements, attribute selectors, :not(), :is(), :where()
- Sample selectors from simple to complex
FAQ
Does inline style beat ID selectors?
Yes. Inline styles (style="...") have a specificity of (1,0,0,0) — one column higher than IDs. They beat any selector-based rule unless !important is used.
How does :not() affect specificity?
The :not() pseudo-class itself adds nothing, but the selector inside it does contribute. :not(.active) adds (0,1,0) — same as a class selector.
What about :where()?
:where() always contributes zero specificity, regardless of its content. It is useful when you want to write low-priority base styles that are easy to override.