CSS Specificity Calculator

Calculate (a, b, c) specificity scores, compare selectors, and learn which rule wins.

Last reviewed: April 2026
Reviewed by , software engineer Ā· last updated April 2026

New to this tool? Click here for instructions

CSS Selectors (one per line)
IDs (b) Classes / Attrs / Pseudo-classes (c) Elements / Pseudo-elements (d)
Enter CSS selectors above to calculate specificity.

How to Use the CSS Specificity Calculator

To use the CSS Specificity Calculator, follow these steps:

1. Go to the CSS Specificity Calculator page.

2. Enter one or more CSS selectors in the provided input field. You can enter one selector per line for batch comparison.

3. Click the 'Calculate' button to see the specificity scores for each selector.

4. The results will be displayed in a color-coded bar format, making it easy to compare the specificity of different selectors.

When to Use the CSS Specificity Calculator

The CSS Specificity Calculator is useful in the following scenarios:

1. When you need to understand how CSS rules are applied to an element and which rule takes precedence.

2. When you are working on a large project with multiple CSS files and need to ensure that your styles are applied correctly.

3. When you are debugging CSS issues and need to identify which styles are being applied to an element.

How it Works

The CSS Specificity Calculator works by analyzing the CSS selectors you enter and calculating their specificity scores based on the following criteria:

1. Inline styles (style attribute) have the highest specificity (a score of 1, 0, 0).

2. ID selectors (#id) have a score of 0, 1, 0.

3. Class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover) have a score of 0, 0, 1.

4. Element selectors (div, p, a) and pseudo-elements (::before, ::after) have a score of 0, 0, 0.

Tips, Edge Cases, or Limitations

Here are some tips and considerations when using the CSS Specificity Calculator:

1. Be aware of the order of selectors in the CSS file. The last selector with the highest specificity will be applied.

2. Avoid using !important unless absolutely necessary, as it can make debugging more difficult.

3. Use modern CSS methodologies like BEM, ITCSS, or utility-first frameworks to manage specificity effectively.

4. The calculator does not support all CSS selectors. If you encounter issues, refer to the official CSS documentation for guidance.

Frequently Asked Questions

CSS specificity is calculated as three numbers (a, b, c): a counts inline styles, b counts ID selectors (#id), and c counts class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover).
No, !important does not override specificity. It only overrides the value of a property, not the specificity of the selector.
:not() has no specificity of its own, but its argument contributes. :is() takes the highest specificity of all selectors inside it. :where() always contributes zero specificity.
A class selector (.class) has higher specificity than an element selector (div, p, a).
Yes, the source order matters when specificity is equal. The last selector with the highest specificity will be applied.

Quick reference

CSS Specificity Calculator Quick Reference
Selector Type Specificity Value Example Comparison
Inline Style 1000 style="color:red" Highest priority
#id 100 #main-header { color: blue; } Higher than classes
.class 10 .header-class { color: green; } Lower than IDs
element 1 div { color: black; } Lowest unless overridden
Attribute Selector 10 [data-color="red"] { color: pink; } Same as classes
Pseudo-class 1 a:hover { color: yellow; } Same as element selectors