Skip to content
ToolQivo

CSS Specificity Calculator

Score a selector and find out which of two rules actually wins.

Developer Tools Reviews Free · no sign-up

Quick Tool Overview

The Specificity Calculator scores a selector, breaks out what each part contributes, and compares two selectors to say which rule wins — including the tie case where source order decides.

What it does
Scores and compares CSS selector specificity
You give it
One selector, or two to compare
You get back
A score, a per-part breakdown and a verdict
Best for
Working out why a CSS rule is not applying
Developer Tools Free, unlimited use No sign-up Runs in your browser

About the CSS Specificity Calculator

Specificity decides which rule wins when two of them set the same property, and it is scored as three numbers: ids, classes, and elements. Paste a selector and each part is broken out with what it contributes, so the total is explained rather than asserted.

Comparing two selectors is the question people actually have. Paste both and the calculator says which one wins and why — including the case where they tie and source order decides, which is the one that produces the most confusion. The modern pseudo-classes are handled properly: :where() contributes nothing at all by design, while :is(), :not() and :has() take the specificity of their most specific argument.

Key features of the CSS Specificity Calculator

The comparison, not just a score

Paste two selectors and the calculator says which wins and why, which is the actual question behind the visit.

Every part explained

Each id, class, attribute, pseudo-class and element is listed with what it contributes, so the total is derived rather than asserted.

Modern pseudo-classes handled

:where() contributes nothing by design, while :is(), :not() and :has() take their most specific argument.

Ties called out

Equal specificity means source order decides, which is stated explicitly rather than left as an unexplained draw.

Inline and !important placed

Where they sit relative to selectors, and why an inline style is so hard to override.

How to use the CSS Specificity Calculator

  1. 1

    Paste a selector

    Anything from a single class to a long descendant chain.

  2. 2

    Read the breakdown

    Every part is listed with what it contributes to the score.

  3. 3

    Compare two selectors

    Paste a second one and the calculator says which wins, and why.

  4. 4

    Check the tie cases

    Equal specificity means source order decides, which is called out explicitly.

Frequently asked questions

As three counts: ids, then classes, attribute selectors and pseudo-classes, then elements and pseudo-elements. They compare left to right, and a single id beats any number of classes.

Reviews of the CSS Specificity Calculator

What people who use the CSS Specificity Calculator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the CSS Specificity Calculator. It takes half a minute and no account.

Write the first review

More developer tools