CSS Specificity Calculator

Calculate CSS selector specificity scores and understand the cascade. Compare multiple selectors to debug styling conflicts.

Click to try:

h1 .title

(0,0,1,1)

Inline

IDs

Classes/Attrs/Pseudo

Elements/Pseudo-elements

#main .nav > a:hover

(0,1,2,1)

Inline

IDs

Classes/Attrs/Pseudo

Elements/Pseudo-elements

CSS Specificity Calculator & Guide

CSS specificity determines which style rules apply when multiple rules target the same element. The specificity score is calculated based on the selector components: inline styles, IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements. Understanding specificity is essential for writing maintainable CSS and avoiding !important overuse.

Frequently Asked Questions

What is CSS specificity?

CSS specificity is a weight given to each CSS selector to determine which styles take precedence when multiple rules apply to the same element. Specificity is calculated as a score of four numbers: (inline, ID, class/attr/pseudo-class, element/pseudo-element). A higher score wins. If specificity is equal, the later rule in the stylesheet wins.

How is specificity calculated?

Specificity is calculated as 4 values: (a, b, c, d). "a" is 1 if inline style, 0 otherwise. "b" counts ID selectors. "c" counts class selectors, attribute selectors, and pseudo-classes (like :hover). "d" counts type selectors (HTML elements) and pseudo-elements (like ::before). The universal selector (*) has zero specificity.

What beats what in specificity?

Inline styles (1,0,0,0) beat ID selectors (0,1,0,0) which beat class/attribute/pseudo-class selectors (0,0,1,0) which beat element selectors (0,0,0,1). !important overrides all specificity. When specificity is equal, the declaration that appears last in the CSS wins.

When should I use !important?

Use !important sparingly. It makes CSS hard to maintain because it overrides all other specificity. Good use cases include overriding third-party library styles, utility classes that must always apply, and accessibility-related styles. Instead of !important, try using more specific selectors or restructuring your CSS.

Does the universal selector affect specificity?

No, the universal selector (*), combinators (+, >, ~, ||, and space), and the :is() pseudo-class have zero specificity. The :not(), :has(), and :is() pseudo-classes themselves have zero specificity, but their arguments do contribute to specificity.

𝕏 Twitter in LinkedIn

Rate this tool

3.7 / 5 · 68 ratings

More Tools

{ }CSS Minifier / Beautifier 🎨CSS Formatter 🎨Tailwind to CSS Converter

Stay Updated

Get weekly dev tips and new tool announcements.

No spam. Unsubscribe anytime.

Enjoy these free tools?

☕Buy Me a Coffee

How to Use

Enter or paste your data in the input field
Configure any options if available
Click the action button to process
Copy the result to your clipboard

Use Cases

Development and debugging workflows
Data format conversion
Code generation and formatting
Quick calculations and validation

FAQ

Is this Css Specificity Calculator tool free to use?

Yes, the Css Specificity Calculator tool is completely free. No registration or payment required.

Is my data secure?

Absolutely. All processing happens client-side in your browser. Your data never leaves your device or is sent to any server.

What formats does the Css Specificity Calculator tool support?

The tool supports all standard formats for CSS styling and formatting. Check the tool interface for specific format options.