Free Online CSS Specificity Calculator
Calculate selector weights and debug hierarchy instantly
Our CSS specificity calculator helps you understand why certain styles override others. Paste any CSS selector to get a detailed weight breakdown and visual hierarchy score instantly.
- Method
- A, B, C Tuple
- Processing
- Real-time
- Privacy
- 100% Local
- Price
- Free
Selector Weights
Instantly see the (ID, Class, Element) count for any complex CSS selector string.
Debug Overrides
Identify why your styles aren't applying and which rule is currently winning the hierarchy.
Deep Analysis
Full support for modern pseudo-classes like :not(), :is(), and element combinators.
CSS Specificity Calculator online
Enter your CSS selector below to see its specificity score.
Specificity Score
Score: 0, 0, 0
What is CSS Specificity?
CSS Specificity is the algorithm used by browsers to determine which CSS rule should be applied to an element when multiple conflicting rules exist. It is one of the most critical concepts in modern web development, as it directly impacts how styles are rendered and inherited across your application. Without a clear understanding of specificity, debugging CSS can become an exercise in frustration, often leading to the overuse of !important.
According to the W3C Selectors Level 4 specification, specificity is calculated by counting the number of various components in a selector. The resulting weight is not a single base-10 number (like 121), but rather a hierarchy of values (A, B, C). A higher value in the "A" column (IDs) will always override any value in the "B" (Classes) or "C" (Elements) columns, regardless of how many items are in those lower columns.
Many developers ask how to calculate css specificity score for complex projects. Our tool provides a css specificity hierarchy tool that automates this process. By using a css specificity calculator online free of charge, you can avoid manual counting errors and focus on building high-quality UI. This is widely considered the best css specificity tool for developers who need to understand css specificity rankings across large-scale stylesheets.
When you use our CSS specificity tool, we break down your selector into these three categories to help you visualize the weight. This is essential for professional developers who want to maintain clean, scalable stylesheets and avoid "specificity wars" where increasingly complex selectors are used just to override simple styles. You can also use this tool to compare css selectors specificity between different files or components.
✗Conflicting Rules
/* Specificity (0, 0, 1) */
div { color: red; }
/* Specificity (0, 1, 0) */
.box { color: blue; }The browser chooses blue because the class is more specific than the element.
✓Optimized Hierarchy
By keeping your scores low (e.g., using only single classes), your CSS becomes more modular and easier to override when needed. High specificity (using many IDs) creates "hard" code that is difficult to maintain.
Why Use a Specificity Calculator?
Understanding the mathematical weight of your selectors is the first step toward writing "future-proof" CSS. Here is why developers use our calculator:
Debug Style Overrides
Identify exactly why a style isn't being applied. Our tool shows you the raw score so you can compare it against conflicting rules in your codebase. This works perfectly alongside our CSS Validator to ensure your code is error-free.
Eliminate !important
Stop using "!important" as a hammer. By understanding specificity, you can write slightly more specific selectors to win the cascade without breaking the hierarchy. For better results, use our CSS Minifier to keep your production files small.
Scalable Architecture
Maintain a low-specificity baseline (like BEM) across your project. Use the calculator to audit new components and ensure they don't introduce high-weight selectors. Complement your workflow with our CSS Formatter for clean code.
Learn CSS Deeply
Visualize how pseudo-classes like :not(), :is(), and :where() interact with the cascade. Our tool supports the latest CSS4 specifications for accurate learning. Check out our CSS Tools directory for more utilities.
Selector Specificity Comparison
| Selector Type | Example | Specificity Score (A, B, C) |
|---|---|---|
| ID Selector | #main | (1, 0, 0) |
| Class / Attr / Pseudo-class | .active, [href], :hover | (0, 1, 0) |
| Element / Pseudo-element | div, p, ::before | (0, 0, 1) |
| Compound Selector | nav#main .link:hover | (1, 2, 1) |
| The :where() Pseudo-class | :where(#id, .class) | (0, 0, 0) |
Frequently Asked Questions
What is CSS Specificity?
CSS Specificity is a weight or score applied to a given CSS declaration, based on the types of selectors used. It determines which CSS rule is applied by the browser when multiple rules target the same element. The hierarchy is generally IDs > Classes/Attributes/Pseudo-classes > Elements/Pseudo-elements.
How is the specificity score calculated?
The score is typically represented as a three-part tuple (A, B, C). "A" counts IDs (#example), "B" counts classes (.example), attributes ([type="text"]), and pseudo-classes (:hover). "C" counts elements (div) and pseudo-elements (::before). A higher number in a higher-priority column always wins regardless of numbers in lower columns.
Does !important affect specificity?
While "!important" is not part of the specificity score tuple itself, it overrides all other specificity rules. If two conflicting declarations both use !important, the one with higher specificity wins. It should be used sparingly as it makes debugging difficult.
What has the highest specificity in CSS?
Inline styles (style="...") have the highest specificity (often represented as 1,0,0,0), followed by ID selectors (0,1,0,0). However, the !important flag can override even inline styles.
How does :not() affect specificity?
The :not() pseudo-class itself does not add specificity, but the selectors inside the parentheses do. For example, :not(.active) has the specificity of a class (0,1,0). The same applies to :is() and :has().
Does :where() add to specificity?
No, the :where() pseudo-class always has a specificity of 0, no matter what selectors are placed inside it. This makes it perfect for library authors who want their styles to be easily overridable.
Why is my CSS not applying?
If your CSS isn't appearing, it's likely being overridden by a more specific selector elsewhere in your stylesheet. Use this Specificity Calculator to compare your selector against the one that is currently "winning" in the browser inspector.
How do combinators (>, +, ~) affect specificity?
Combinators like the child selector (>), adjacent sibling (+), or general sibling (~) do not add any specificity to the score. Only the actual selectors (ids, classes, elements) they join contribute to the weight.
Is a class more specific than an element?
Yes, a single class (0,1,0) is always more specific than any number of element selectors. For example, a class is more specific than 10 or even 100 "div" tags stacked together.
What is the "Ice Cream" analogy for specificity?
A common developer analogy is: IDs are the high-value scoops, Classes are the sprinkles, and Elements are the cones. No matter how many sprinkles or cones you have, you can't beat a scoop of ice cream (ID) in value.
Can I calculate specificity for multiple selectors?
Yes, our tool allows you to paste any CSS selector string. If you have comma-separated selectors, you should calculate them individually as they each represent a separate rule with its own specificity.
Is this specificity tool free?
Yes, our CSS Specificity Calculator is 100% free, runs entirely in your browser, and requires no registration or downloads.
Related CSS Tools
Master your styles with our developer toolkit: