You write a CSS rule. You refresh the page. Nothing changes. Every front-end developer, from complete beginner to senior engineer, has been there. The usual culprit is not a typo or a caching issue. It is CSS specificity: another rule with a "heavier" selector is quietly winning the battle for your element.
The Provixx CSS Specificity Calculator shows you exactly what is happening. Type any selector and see its specificity instantly, broken down piece by piece with colors, tooltips, and plain-English explanations. You can also compare two selectors head to head, rank a whole list, and even paste an entire stylesheet to find the heaviest and most problematic selectors.
Open the Free CSS Specificity Calculator →
It is free, needs no account, and runs 100% in your browser. In this guide you will learn what specificity is, how it is calculated, how modern selectors like :is() and :where() behave, and how to use the calculator to fix real CSS problems faster.
Table of Contents
- What Is CSS Specificity?
- How Is CSS Specificity Calculated?
- Worked Examples
- The Biggest Trap: Specificity Is Not Base 10
- Modern Selectors: :is(), :not(), :has(), :where()
- Specificity, !important, Inline Styles and the Cascade
- Features of the Provixx CSS Specificity Calculator
- How to Use the Calculator Step by Step
- Real Debugging Scenario: Why Is My Style Not Applying?
- Best Practices for Low, Maintainable Specificity
- Common Specificity Mistakes
- Who Is This Tool For?
- Frequently Asked Questions
- Conclusion
What Is CSS Specificity?
CSS specificity is the algorithm browsers use to decide which CSS rule wins when several rules target the same element and set the same property. If two selectors both try to color a button, the one with the higher specificity applies its value.
A good analogy is weight classes in boxing. A single heavyweight beats any number of lightweights. In CSS, one ID selector outranks any number of class selectors, and one class outranks any number of plain element selectors. Understanding this ranking is the key to writing predictable CSS and to debugging styles that "refuse" to apply.
How Is CSS Specificity Calculated?
Specificity is a three-part value, usually written as A - B - C (or (A, B, C)). Each part counts a different kind of selector:
| Column | What it counts | Examples |
|---|---|---|
| A | ID selectors | #header, #main |
| B | Class selectors, attribute selectors, and pseudo-classes | .card, [type="text"], :hover, :first-child |
| C | Type (element) selectors and pseudo-elements | div, p, ::before, ::after |
Some parts of a selector are ignored and add nothing: the universal selector *, and the combinators (descendant space, >, +, and ~).
When the browser compares two selectors, it compares the columns from left to right. It looks at column A first. Only if A is tied does it look at B, and only if B is also tied does it look at C. If everything is tied, the rule that appears later in the stylesheet wins.
Worked Examples
Here are real selectors and their specificity. You can paste any of them into the CSS Specificity Calculator to see the breakdown visually.
| Selector | Specificity (A - B - C) | Why |
|---|---|---|
p | 0 - 0 - 1 | One element |
.btn | 0 - 1 - 0 | One class |
#nav | 1 - 0 - 0 | One ID |
div > p.lead | 0 - 1 - 2 | One class, two elements (the > is ignored) |
ul li a:hover | 0 - 1 - 3 | One pseudo-class, three elements |
.nav.active:hover | 0 - 3 - 0 | Two classes plus one pseudo-class |
input[type="email"]:focus | 0 - 2 - 1 | One attribute, one pseudo-class, one element |
a:not(.disabled):hover | 0 - 2 - 1 | :not() counts its argument (.disabled), plus :hover, plus the element a |
ul.menu > li.item::before | 0 - 2 - 3 | Two classes; elements ul, li and the pseudo-element ::before |
#header.nav | 1 - 1 - 0 | One ID and one class |
body #main .content p | 1 - 1 - 2 | One ID, one class, two elements |
#header .nav ul li.active | 1 - 2 - 2 | One ID; two classes (.nav and .active); two elements (ul and li) |
That last example is a classic place where people miscount. The class in li.active and the class in .nav both go in column B, so the answer is 1 - 2 - 2. A calculator removes this kind of human error.
The Biggest Trap: Specificity Is Not Base 10
Many beginners think of specificity as a single number, as if 0 - 1 - 0 meant 10 and 0 - 0 - 11 meant 11. That is wrong. The columns never carry over into each other.
- Eleven classes (
0 - 11 - 0) will never beat one ID (1 - 0 - 0). - Twenty elements (
0 - 0 - 20) will never beat one class (0 - 1 - 0).
This is why the Provixx calculator always compares the three columns in order, and why its "visual weight" bar is labeled as illustration only. The tool never turns specificity into one base-10 number when deciding a winner.
Modern Selectors: :is(), :not(), :has() and :where()
CSS Selectors Level 4 introduced functional pseudo-classes with special specificity rules. These are the rules that most online calculators get wrong, and the ones this tool implements properly:
| Selector | Specificity rule | Example |
|---|---|---|
:is(A, B) | Takes the specificity of the most specific argument | :is(#nav, .menu) = 1 - 0 - 0 |
:not(A, B) | Takes the specificity of the most specific argument | :not(.disabled, a) = 0 - 1 - 0 |
:has(A, B) | Takes the specificity of the most specific argument | div:has(> #hero) = 1 - 0 - 1 |
:where(...) | Always zero, whatever is inside | :where(#app) .btn = 0 - 1 - 0 |
:nth-child(An+B of S) | One pseudo-class plus the most specific selector in S | :nth-child(odd of .item) = 0 - 2 - 0 |
::slotted(S) | One pseudo-element plus the specificity of S | ::slotted(.slot-item) = 0 - 1 - 1 |
:host(S) | One pseudo-class plus the specificity of S | :host(.active) = 0 - 2 - 0 |
The most important practical difference is between :is() and :where(). They match exactly the same elements, but :is() brings its argument's specificity with it while :where() contributes nothing. That makes :where() perfect for resets, base styles, and design-system defaults that should be easy to override.
Specificity, !important, Inline Styles and the Cascade
Specificity is only one step in the full CSS cascade. As a practical summary, the order is:
!importantdeclarations win over normal declarations.- Inline styles (the
style="..."attribute) beat rules from stylesheets. - Selector specificity decides between stylesheet rules: the higher
A - B - Cwins. - Source order breaks ties: the later rule wins.
When !important appears on both competing declarations, the normal comparison (specificity, then order) decides between them. Keep in mind that cascade layers (@layer) and style origins (browser, user, author) also influence the final result. The Provixx calculator focuses on selector specificity and lets you flag inline and !important in its comparison mode, so you can see the simplified outcome in seconds.
Features of the Provixx CSS Specificity Calculator
1. Live Calculation
There is no need to press a button. As you type a selector, the result updates instantly. You can also use the Calculate button on mobile.
2. A Highly Visual Result
Instead of just a number, you get three large cards for IDs, Classes, Attributes and Pseudo-classes, and Elements and Pseudo-elements, each with its own color. The selector itself is highlighted token by token, and hovering over a part tells you what it is and how much it adds. A breakdown table explains every part in plain English, so beginners learn while they use the tool.
3. Accurate CSS Selectors Level 4 Engine
The tool uses a real selector parser, not a simple text count. It correctly handles :is(), :not(), :has(), :where(), :nth-child(... of S), attribute selectors containing special characters, escaped identifiers, legacy pseudo-elements like :before, and comma-separated selector lists, where each selector is calculated separately. It even ships with a built-in engine self-test of 30 specification cases that you can run yourself with one click.
4. Compare Selectors: "Who Wins?"
The Head to Head mode puts two selectors side by side and tells you who wins and why, comparing the ID, class, and element columns one by one. You can toggle the inline style and !important flags, and quick "battle" presets such as ID versus classes, a tie, or :is() versus :where() make it easy to learn by experimenting.
5. Rank a List
Paste a list of selectors, one per line, and get them ranked from highest to lowest specificity, with the winner highlighted. Ties are clearly marked as "later rule wins," and you can sort high to low, low to high, or in the original order.
6. Analyze a Whole CSS File
This is the feature that sets the tool apart. Paste a stylesheet or drag and drop a .css file, and the calculator extracts every selector, including those inside @media and other at-rules. You get summary cards (total selectors, highest specificity, average level, how many use IDs, how many !important declarations), a distribution chart, a Top 10 heaviest selectors list, a sortable and searchable table with line numbers, and audit insights with recommendations. You can copy a report or export everything to CSV.
7. Built-In Learning Section
A seven-part learning area explains specificity, the calculation, what is ignored, special selectors, the cascade order, best practices, and common mistakes. Each section has clickable examples that load straight into the calculator.
8. Convenience Features
- Example chips to try common selectors instantly.
- Recent history so you can return to previous selectors.
- Share link to send a calculation to a teammate.
- Keyboard shortcuts: press
/to focus the input,Ctrl+Enterto calculate, andEscto clear. - Light and dark theme.
How to Use the Calculator Step by Step
- Open the tool: go to the Provixx CSS Specificity Calculator.
- Type or paste a selector such as
#header .nav ul li.active. Or click one of the example chips. - Read the result: the big badge shows
1 - 2 - 2, and the three cards show the IDs, classes, and elements. - Hover over the highlighted selector or open the breakdown table to see what each part adds.
- Compare: in the Compare section, enter your two competing selectors and read the verdict.
- Audit: paste your whole stylesheet into "Analyze a CSS File" to find heavy selectors and fix them.
- Share or export: copy the share link or export the report as CSV.
Try the CSS Specificity Calculator Now →
Real Debugging Scenario: Why Is My Style Not Applying?
Imagine this HTML and CSS:
<nav id="header">
<a class="btn" href="#">Sign up</a>
</nav>
/* Your new rule */
.btn {
background: green;
}
/* Existing rule somewhere else in the project */
#header a {
background: gray;
}You expect the button to be green, but it stays gray. Paste both selectors into the Head to Head comparison:
.btn= 0 - 1 - 0#header a= 1 - 0 - 1
The calculator reports that the second selector wins because it has one ID and the first has none, and the ID column is compared first. Now you know why, and you have better options than adding !important:
- Refactor the old rule to use a class instead of an ID, which lowers the specificity for everyone.
- Make your selector match the weight deliberately, for example
#header .btn(1 - 1 - 0), which beats1 - 0 - 1. - Wrap base styles in
:where()so they never fight back.
The best long-term fix is usually the first one, because it keeps your CSS flat and easy to maintain.
Best Practices for Low, Maintainable Specificity
- Keep specificity flat and low. Prefer single-class selectors, for example BEM names like
.card__title. - Avoid IDs for styling. Use IDs for anchors and JavaScript hooks. An ID in CSS forces you to use another ID or
!importantto override it. - Treat
!importantas a last resort. It creates override wars that are hard to unwind. - Use
:where()for resets and defaults so consumers can override them without effort. - Use cascade layers (
@layer) in larger projects to control priority without inflating selectors. - Keep selector chains short. Write
.list__iteminstead ofdiv.card ul.list li.item. - Audit regularly. Paste your stylesheet into the calculator now and then and look at the heaviest selectors.
Common Specificity Mistakes
- Over-qualifying selectors. Writing
ul.navordiv.sidebarinstead of.navor.sidebaradds needless element weight and ties your CSS to specific tags. - Chaining many classes to win a fight. Selectors like
.card.featured.active.primary.largeare a symptom of a deeper architecture problem. - Thinking specificity is a single number. Remember: 11 classes never beat 1 ID.
- Forgetting that source order breaks ties. If two selectors have the same specificity, the later one wins.
- Assuming
:where()counts its argument. It does not. Use:is()if you want the argument's specificity. - Reaching for
!importanttoo early. It fixes today's problem and creates tomorrow's.
Who Is This Tool For?
- Beginners learning how CSS decides which rule wins.
- Front-end developers debugging styles that will not apply.
- Design system and component library authors who need predictable, overridable styles.
- WordPress and theme developers overriding styles from plugins and parent themes.
- Code reviewers and tech leads auditing stylesheets for maintainability.
- Teachers and students who want a visual way to explain the cascade.
Frequently Asked Questions
What is a CSS specificity calculator?
It is a tool that calculates the specificity value of a CSS selector, usually shown as three numbers (IDs, classes, elements), so you can predict which rule will win when selectors conflict.
How do I calculate the specificity of a selector?
Count the ID selectors (column A), then the class selectors, attribute selectors, and pseudo-classes (column B), then the element selectors and pseudo-elements (column C). Ignore * and combinators. Or just paste the selector into the Provixx calculator.
What is the specificity of #header .nav ul li.active?
It is 1 - 2 - 2: one ID, two classes (.nav and .active), and two elements (ul and li).
Does a bigger number of classes beat an ID?
No. Specificity columns never carry over. Even eleven classes lose to a single ID.
What is the specificity of :where() and :is()?
:where() always has zero specificity. :is() takes the specificity of its most specific argument.
Does !important override specificity?
An !important declaration beats normal declarations regardless of selector specificity. If both competing declarations are !important, specificity and source order decide between them.
What happens when two selectors have the same specificity?
The rule that appears later in the stylesheet wins.
Can I analyze my whole stylesheet?
Yes. Use the "Analyze a CSS File" section to paste CSS or drop a .css file. You will see every selector with its specificity, line number, and at-rule context, plus insights and a CSV export.
Is the tool free and private?
Yes. It is completely free, and everything runs locally in your browser. Your selectors and CSS are never uploaded anywhere.
Does it follow the latest CSS standards?
Yes. The calculation follows the CSS Selectors Level 4 specification, including the modern functional pseudo-classes.
Conclusion
CSS specificity does not have to be mysterious. Once you understand the three-column system and use a reliable CSS specificity calculator, debugging stubborn styles becomes a matter of seconds instead of hours. The Provixx tool gives you accurate Level 4 calculations, a clear visual breakdown, head-to-head comparisons, whole-stylesheet audits, and a built-in learning section, all free and private in your browser.
Launch the CSS Specificity Calculator (Free) →
Bookmark it, share it with your team, and explore more free developer tools on Provixx.