How is specificity compared?

Left to right: a rule with more IDs always beats one with fewer, regardless of classes or elements. Ties are broken by the next group, then source order.

What about !important and inline styles?

Inline styles beat selector specificity, and !important beats normal declarations. Both sit outside the a,b,c calculation.

Do pseudo-elements count?

Pseudo-elements like ::before count as elements (the third group), while pseudo-classes like :hover count as classes (the second group).

CSS & Design

CSS Specificity Calculator

Calculate the specificity of a CSS selector.

Free foreverRuns in your browserNo sign-up

CSS selector

IDs

Classes / attrs / pseudo-classes

Elements / pseudo-elements

Specificity

1,2,3

Specificity is compared left to right (IDs, then classes, then elements). A higher group wins regardless of the lower ones. Inline styles and !important are separate and beat these.

About the CSS Specificity Calculator

When two CSS rules target the same element, specificity decides which one wins. It is counted as three groups: IDs, then classes, attributes and pseudo-classes, then elements.

This calculator parses a selector and shows each group so you can tell why a rule does or does not apply.

It runs in your browser.

Key features

Counts IDs, classes and elements
Shows the a,b,c score
Handles pseudo-classes and attributes
Runs in your browser

How to use

1Paste a CSS selector.
2Read the specificity breakdown.
3Compare it against another rule.

Examples

Nested selector

Input: #nav ul li a.active

Output: 1,1,3

One ID, one class and three element names give a specificity of 1,1,3.

Frequently asked questions

How is specificity compared?: Left to right: a rule with more IDs always beats one with fewer, regardless of classes or elements. Ties are broken by the next group, then source order.
What about !important and inline styles?: Inline styles beat selector specificity, and !important beats normal declarations. Both sit outside the a,b,c calculation.
Do pseudo-elements count?: Pseudo-elements like ::before count as elements (the third group), while pseudo-classes like :hover count as classes (the second group).