Last updated
Quick Reference: Specificity Score Components
- Inline styles — (1, 0, 0, 0) — highest, overrides everything except
!important - ID selectors (#id) — (0, 1, 0, 0)
- Class selectors (.class), attribute selectors ([attr]), pseudo-classes (:hover) — (0, 0, 1, 0)
- Element selectors (div, p) and pseudo-elements (::before) — (0, 0, 0, 1)
- Universal selector (*) and combinators (+, >, ~, space) — (0, 0, 0, 0)
Use the CSS Specificity Calculator at techconverter.me to paste any selector and instantly see its score broken down component by component. Compare multiple selectors side by side to resolve conflicts without guessing.
Examples
Example 1: Basic Selector Comparison
You have a paragraph that should be red, but it keeps showing up blue. You have two rules in your stylesheet:
p { color: blue; }
.intro p { color: red; }
Enter both selectors into the calculator to compare their scores:
p— specificity score: (0, 0, 1) — one element selector.intro p— specificity score: (0, 1, 1) — one class + one element
The class selector wins. The paragraph inside .intro will be red. If the paragraph is still blue, it is not inside an element with class intro.
Example 2: ID vs Class Conflict
A button has both an ID and a class applied. Two rules target it:
.btn.btn-primary { background: blue; }
#submit-btn { background: green; }
Enter both selectors into the calculator:
.btn.btn-primary— score: (0, 2, 0) — two class selectors#submit-btn— score: (1, 0, 0) — one ID selector
The ID selector wins regardless of order in the stylesheet. The button background will be green. To override the ID rule without using !important, you would need another ID selector or an inline style.
Example 3: Pseudo-class and Pseudo-element Specificity
You want to style a link on hover but your hover style is not applying:
nav a.active { color: orange; }
a:hover { color: purple; }
Calculate both:
nav a.active— score: (0, 1, 2) — one class + two elements (nav, a)a:hover— score: (0, 1, 1) — one pseudo-class + one element
The nav a.active rule wins. To make the hover style apply, increase its specificity:
nav a.active:hover { color: purple; }
/* score: (0, 2, 2) — wins */