Skip to main content
T

CSS Specificity Calculator

NEW

Paste CSS selectors to see their specificity scores, compare them head-to-head, and understand which one wins.

Send output to:
Advertisement

How to use CSS Specificity Calculator

  1. Paste one or more CSS selectors into the input box (one per line).
  2. Each selector's specificity is shown as an (a,b,c) triple with a breakdown of IDs, classes, and elements.
  3. When you enter multiple selectors, the winner is highlighted in green with a 'WINS' badge.
  4. Use the bar chart to visually compare specificity across all selectors.
  5. Edit any selector and watch the results update in real time.

What is CSS Specificity Calculator?

CSS specificity determines which styles apply when multiple rules target the same element. It's calculated as a three-component value (a, b, c) where 'a' counts IDs, 'b' counts classes/attributes/pseudo-classes, and 'c' counts elements/pseudo-elements. Higher values win, with 'a' being the most significant.

This tool parses your selectors and breaks down their specificity instantly. Paste multiple selectors (one per line) and the tool highlights the winner. It correctly handles modern CSS pseudo-classes like :is(), :not(), :has(), and :where() according to the CSS Selectors Level 4 specification.

Advertisement

FAQ

What do the (a,b,c) numbers mean?
The three numbers represent: a = count of ID selectors (#id), b = count of classes (.class), attributes ([attr]), and pseudo-classes (:hover), c = count of element names (div, p) and pseudo-elements (::before). An inline style beats all; !important beats everything except another !important.
How does :is() and :not() specificity work?
Per the CSS Selectors Level 4 spec, :is() and :not() take the specificity of their most specific argument. For example, :is(#id, .class) has specificity (1,0,0) — the highest among its arguments. :has() works the same way. :where() always contributes (0,0,0) regardless of its arguments.
What about !important?
!important declarations override normal declarations regardless of specificity. When two !important declarations conflict, specificity is used to break the tie. This tool calculates base selector specificity only — it does not account for !important.

Related tools

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement