What is CSS specificity?

CSS specificity is a weight system that browsers use to determine which CSS rule applies when multiple rules target the same element. It is represented as three numbers (a,b,c): a = ID selectors, b = class/attribute/pseudo-class selectors, c = element/pseudo-element selectors. Higher specificity wins; when specificity is equal, the rule that appears later in the stylesheet wins.

How is CSS specificity calculated?

Each selector component adds to one of three columns: IDs (#id) add 1 to column a. Classes (.class), attributes ([attr]), and pseudo-classes (:hover, :focus) add 1 to column b. Elements (div, p) and pseudo-elements (::before, ::after) add 1 to column c. Inline styles trump everything with a specificity of (1,0,0,0). The universal selector (*) and combinators (+, >, ~, space) have zero specificity.

Which selector wins when specificities are equal?

When two selectors have identical specificity, the rule that appears later in the stylesheet (or in the document) wins — this is called the cascade order. The !important declaration overrides all specificity rules, but its use is generally considered a code smell and should be avoided when possible.

Does :not() add to specificity?

The :not() pseudo-class itself has zero specificity, but the selector inside it does count. For example, :not(.active) contributes 0,1,0 because .active is a class selector inside :not().

What does (0,0,0) specificity mean?

A specificity of (0,0,0) means the selector has no IDs, no classes/attributes/pseudo-classes, and no elements — this is usually the universal selector (*) or a combinator. These styles are the easiest to override.

Free CSS Developer Tool

Calculate CSS
Selector Specificity

Enter any CSS selectors and instantly see their (a,b,c) specificity scores. Compare multiple selectors side-by-side and understand exactly which style rule wins in a cascade conflict.

⚡

Real-Time Calculation

Specificity scores update instantly as you type — no button click required.

📊

Visual Comparison

Color-coded bars show ID, class, and element contributions at a glance.

🔍

Explain Mode

See exactly which parts of your selector contribute to each score component.

CSS Specificity Calculator

Enter one or more CSS selectors. Scores update in real-time.

Try:

(–,–,–)

ID selectors (#id)

Class / Attr / Pseudo-class (.cls, [attr], :hover)

Elements / Pseudo-elements (div, ::before)

Quick Reference

#id(1,0,0)ID selector

.class / [attr] / :pseudo-class(0,1,0)Class, attribute, or pseudo-class

element / ::pseudo-element(0,0,1)Tag or pseudo-element

* (universal)(0,0,0)No specificity

style="..." (inline)(1,0,0,0)Overrides all selectors

Frequently Asked Questions

Everything you need to know about CSS Specificity Calculator.

Calculate CSSSelector Specificity