What does this tool do?
The CSS Specificity Calculator computes the specificity of each CSS selector you enter, shown as (a, b, c) where it counts IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements separately. It ranks your selectors by score and compares them with bar charts, so you can see at a glance which rule will override another. It's ideal for frontend developers resolving style conflicts.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
How specificity is calculated
Specificity has three columns: column a counts ID selectors (#header), column b counts classes (.nav), attributes ([type="text"]) and pseudo-classes (:hover), and column c counts elements (div, li) and pseudo-elements (::before). For example, #header .nav > a:hover yields (1, 2, 1). The tool converts this triple into a single score using a*100 + b*10 + c so you can compare selectors easily and spot the winner instantly.
When it's useful
If a CSS rule isn't applying the way you expect, another rule with higher specificity is usually overriding it. Paste your conflicting selectors here; the highest-scoring one appears at the top, so you immediately know which one wins. This helps you diagnose the issue before reaching for !important, flatten unnecessarily nested selectors, and write more maintainable, predictable stylesheets.
Frequently asked questions
Does !important affect specificity?
No, this tool calculates pure selector specificity. !important is not part of specificity; it acts as a separate layer that overrides normal rules, so it isn't included in the calculation.
Why do IDs always beat classes?
Because column a (IDs) is compared before column b (classes). A single ID selector is worth 100, while even ten classes only reach 100; the tie always breaks in favor of the leftmost column.
How are pseudo-classes like :not() counted?
This tool counts pseudo-classes such as :not() and :hover in column b. Note: in real browsers :not() itself isn't counted but its argument is; for simple selectors the result is usually the same.
Is CSS Specificity Calculator free?
Yes. CSS Specificity Calculator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. CSS Specificity Calculator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.