How to use the CSS Specificity Calculator
- 1. Paste selectorsOne per line, straight from your stylesheet.
- 2. CalculateEach selector gets a score in three parts.
- 3. Read the winnerThe list is sorted, so the selector at the top wins a conflict.
How specificity is scored
Specificity is written as three numbers (A, B, C):
- A: ID selectors, like #nav.
- B: classes (.btn), attribute selectors ([type="text"]) and pseudo-classes (:hover).
- C: element names (div) and pseudo-elements (::before).
Scores are compared left to right, like digits that never carry over. (1, 0, 0) beats (0, 12, 0), because one ID outweighs any number of classes. If two selectors tie, the one written later in the CSS wins. Inline styles and !important sit above all of this, and the universal selector * adds nothing.
Worked example
The sample selectors score:
:is(#main, .content) p::first-line→ (1, 0, 2): :is() takes its strongest argument, #main.#nav .item a:hover→ (1, 2, 1): one ID, a class and a pseudo-class, and one element.header nav > a.active→ (0, 1, 3)..btn.primary→ (0, 2, 0).ul li a→ (0, 0, 3).
So #nav .item a:hover ranks highest, because (1, 2, 1) beats (1, 0, 2) on the second number. Special cases: :where() always counts as zero, which makes it perfect for easy-to-override base styles, while :is(), :not() and :has() count as their most specific argument. When a style refuses to apply, paste both competing selectors from DevTools into this calculator; the higher score explains which rule the browser chose.
Frequently asked questions
Why is my class not overriding an ID?
An ID scores in the first column, which beats any number of classes. Add the ID to your selector or lower the original rule's specificity.
Should I use !important?
Rarely. It makes future changes hard. Prefer fixing the selector instead.
Does selector order matter?
Only when specificity is equal: then the rule that comes later in the CSS wins.
Is it free?
Yes. Calculating your first scores asks for your name and WhatsApp number once, and then every Uncodemy tool opens without asking.