Create account
Interfaces and CSSRuns in your browser

CSS Specificity Calculator

Check why one selector overrides another without executing CSS or analyzing a full stylesheet.

  • ID/class/type score
  • Selector list
  • No CSS execution
Online tool

Try the tool

Add your data, choose the settings, and get the result.

Input

Result

1-2-2  #app .card:hover > h2::before
  • 1-2-2 — ID 1, class/attribute/pseudo-class 2, type/pseudo-element 2

Your data stays here

Text and selected files are processed in the current browser and are not sent to a server to produce the result.

Reviewed: 2026-07-17
01

How to use it

  1. 1

    Paste one selector or a comma-separated list.

  2. 2

    Review the resulting score for each selector.

  3. 3

    Compare ID, class/attribute/pseudo-class, and type buckets.

02

What the tool can do

  • Counts ID selectors, classes, attributes, and pseudo-classes.
  • Counts type selectors and pseudo-elements.
  • Bounded handling of :where() as zero and :is/:not/:has by strongest argument.
03

Common use cases

  • Debugging a conflict between a utility class and a component selector.
  • Checking a selector before simplifying CSS.
  • Documenting specificity rules in a design system.
04

How it works inside

The score is emitted as IDs-classes-types, for example 1-2-0.

:where() is zeroed according to modern specificity rules.

05

Questions and answers

Why is !important not in the score?

!important belongs to cascade resolution, not to the selector specificity number.

Can it analyze a whole CSS file?

No. The tool calculates explicitly pasted selectors without stylesheet parsing.