{ CSS Specificity Calculator }

// enter any selector and get its exact specificity value

Enter any CSS selector and get its exact specificity score — ID, class, element breakdown shown visually. Compare multiple selectors, free, no signup.

// SELECTOR INPUT
EXAMPLES:
// SPECIFICITY SCORE
( 0 INLINE , 0 ID , 0 CLASS , 0 ELEMENT )
INLINE
0
ID
0
CLASS
0
ELEMENT
0
// BREAKDOWN Type a selector above to see the breakdown
// COMPARE SELECTORS
SELECTOR INLINE ID CLASS ELEMENT WEIGHT

HOW TO USE

  1. 01
    Type any CSS selector

    Enter a selector in the input field — the score and breakdown update in real time as you type. Click any example to load it instantly.

  2. 02
    Read the breakdown

    Each token in your selector is colour-coded — IDs in blue, classes in yellow, elements in green. Hover a token to see its contribution.

  3. 03
    Compare selectors

    Use the "Compare Selectors" table to add multiple selectors side-by-side. The winner is highlighted automatically.

FEATURES

Real-time Parsing Token Breakdown Multi-compare Visual Bar Chart Pseudo Support Free & No Signup

USE CASES

  • 🔧 Debug why one rule overrides another unexpectedly
  • 🔧 Verify selector weight before adding !important
  • 🔧 Teach or learn CSS specificity interactively
  • 🔧 Optimise selectors for low-specificity scalable CSS

WHAT IS THIS?

CSS specificity is the algorithm browsers use to decide which rule wins when multiple rules target the same element. It is expressed as a four-number score (inline, id, class, element). This tool parses any selector, calculates the exact score, and shows which tokens contribute to each dimension.

RELATED TOOLS

✔ CSS Validator 🗜 CSS Minifier ✨ CSS Beautifier 📦 Variables Extractor 🔍 Unused Detector

FREQUENTLY ASKED QUESTIONS

How does CSS specificity work?

Specificity is a four-part score (a, b, c, d): a = inline styles, b = ID selectors, c = class, attribute, and pseudo-class selectors, d = type (element) and pseudo-element selectors. The universal selector * and combinators (>, +, ~) contribute zero. Higher scores win, compared left to right.

Does !important override specificity?

Yes. !important is not part of the specificity score — it completely bypasses the cascade for that property, placing it in a separate "important" origin. Two !important declarations are then resolved by specificity, but they always beat non-important declarations regardless of score.

Do pseudo-classes count as classes?

Yes. Pseudo-classes like :hover, :focus, :nth-child(), and :not() all contribute 1 to the class (c) column. The exception is :where(), which always contributes zero specificity by design. :is() and :has() take the specificity of their most specific argument.

Do pseudo-elements count?

Pseudo-elements like ::before, ::after, ::placeholder, and ::first-line each contribute 1 to the element (d) column — the same as a plain HTML tag. Both single-colon legacy syntax (:before) and double-colon modern syntax (::before) are counted the same.

Can specificity overflow from d to c?

No. Each column is independent and never carries over. A selector with 100 element selectors does not equal one class selector. The columns are compared independently, so (0,0,1,0) always beats (0,0,0,99). There is no numeric ceiling — each column can grow as large as needed.

Why does * have zero specificity?

The universal selector * matches any element but contributes nothing to the specificity score by specification. This makes it useful as a "lower than everything" baseline — perfect for CSS resets that should be overridden by any author rule.

CSS Specificity Calculator — Understand the Cascade

CSS specificity is one of the most commonly misunderstood parts of the cascade. When two rules both target the same element and set the same property, the browser needs a way to decide which one wins. That decision is based entirely on specificity — a score calculated from the structure of each selector.

The Four Columns Explained

The score is written as (a, b, c, d). Column a counts inline styles (the style="" attribute), which always trump any stylesheet rule. Column b counts ID selectors (#id). Column c counts class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover). Column d counts element type selectors (div, p) and pseudo-elements (::before).

Best Practices for Managing Specificity

☕