CSS Specificity Calculator

Free

Compute and compare CSS selector specificity (A, B, C) scores instantly.

Examples:

How specificity is counted

A ID selectors (#id) · B classes (.class), attributes ([attr]) and pseudo-classes (:hover) · C element types (div) and pseudo-elements (::before). Compared left to right: (1,0,0) beats (0,10,10). The universal selector * and combinators add nothing. :is(), :not() and :has() take the specificity of their most specific argument, while :where() always counts as zero.

Rate this tool

What is CSS Specificity Calculator?

Updated July 25, 2026

Calculate the specificity of CSS selectors and understand why one rule overrides another. Paste one or more selectors to get their (A, B, C) specificity scores — IDs, classes/attributes/pseudo-classes, and element types — shown in a ranked comparison table with visual weight bars. Correctly handles :is(), :not(), :has() and :where(), comma-separated selector lists, and pseudo-elements. Runs entirely in your browser.

css specificitycss selectorspecificity calculatorcss cascadeselector weightcss debugging

Why choose CSS Specificity Calculator?

The CSS Specificity Calculator instantly breaks down and compares selector weights using standard (A, B, C) scoring to help developers debug overriding issues. It handles complex modern pseudo-classes like :is(), :not(), and :has() alongside traditional selectors. Running entirely client-side in the browser, it requires no installation or registration.

Best for

Debugging stubborn CSS override conflicts
Comparing multiple selectors side by side
Understanding selector weight rules during development

Good to know: This tool focuses strictly on calculating specificity scores rather than linting entire stylesheets or generating CSS code.

How to Use CSS Specificity Calculator

Calculate and compare CSS selector specificity scores instantly to understand why rules override each other.

1
Open the CSS Specificity Calculator
Navigate to the CSS Specificity Calculator tool in your web browser.
2
Paste your CSS selectors
Enter one or more CSS selectors, including comma-separated selector lists, into the input field.
3
Review specificity scores
View the calculated (A, B, C) specificity scores breaking down IDs, classes, attributes, pseudo-classes, and element types.
4
Compare rules and debug
Analyze the ranked comparison table with visual weight bars to determine why one CSS rule overrides another.

Estimated time: PT1M

Frequently Asked Questions

What does the CSS Specificity Calculator do?

This tool calculates the specificity score of CSS selectors using the traditional (A, B, C) format representing IDs, classes/attributes/pseudo-classes, and element types. It helps you understand why one rule overrides another by ranking selectors in a comparison table equipped with visual weight bars.

How do I use the CSS Specificity Calculator?

Simply paste one or more CSS selectors into the input field to instantly compute their specificity scores. The tool automatically analyzes the selectors, breaks down their components, and displays a ranked comparison so you can easily debug your CSS cascade.

Is this CSS specificity tool free to use?

Yes, this tool is completely free with no credit costs required. Anonymous users can perform up to 100 calculations, while authenticated users enjoy a higher rate limit of up to 400 requests.

What browser requirements are needed to run the calculator?

The calculator runs entirely within your web browser with no special plugins or downloads required. As long as you have a modern web browser, you can instantly compute selector weights on the fly.

Does the calculator support advanced CSS pseudo-classes?

Yes, the tool correctly handles modern pseudo-class functions including :is(), :not(), :has(), and :where(). It also accurately evaluates comma-separated selector lists and pseudo-elements.

Is my data private when using this tool?

Your data remains completely private because all calculations run entirely in your browser client-side. The selectors you paste are not sent to or stored on an external server.

What output formats does the calculator provide?

The tool outputs standard (A, B, C) specificity scores breaking down IDs, classes, and element types. Results are presented in a ranked comparison table featuring visual weight bars to clearly illustrate how each selector's score stacks up against the others.