CSS Specificity Calculator

Developer Tools

Score CSS selectors and see which one wins

FreePrivateInstant
Add a file · .txt .md .csv .json … · up to 2.00 MB
Embed this tool on your websiteFree
  1. Choose how tall the frame should be.
  2. Press Copy code.
  3. Paste it into your page, blog, WordPress or Notion HTML block.
Height
Live previewAll embeddable tools

The tool runs inside your visitor's browser, nothing is uploaded, and a small "Powered by ToolCloak" line stays under it. The second line (script) is optional: it makes the frame fit the tool's height.

Similar tools you may like

CSS FormatterBeautify or minify CSS stylesheets
Chmod CalculatorUnix file permissions — numeric and symbolic
CSS MinifierShrink CSS and see bytes saved
IP Subnet CalculatorNetwork, broadcast and host range from CIDR
Average CalculatorMean, median, mode, range and std deviation
Correlation Coefficient Calculator (Pearson r)Pearson correlation between two lists of numbers

History

All history →

CSS Specificity Calculator — at a glance

Find out which CSS selector wins, and why your style is not applying.

Selectors
#nav .item:hover
ul li a
Score
Specificity
(1,2,0) #nav .item:hover
(0,0,2) ul li a

How to use it — step by step

One or more CSS selectors, each on its own line.

1

Paste your input

Paste or type your content into the big input box.

2

Calculate Specificity

Press the button. The result is created instantly on your device.

3

Copy the result

Check the output and press Copy to use it anywhere.

Pro tips

Small things that make the result better.

✦IDs beat classes, and classes beat plain elements, whatever the count.
✦:where() adds zero, while :is(), :not() and :has() take their most specific argument.
✦When two selectors tie, the one written later in the stylesheet wins.

Quick facts

Freeno signup, no limit
Instantresult in a moment
Privatenothing is uploaded
Any devicephone, tablet or PC

Frequently Asked Questions

What does (1,2,0) mean?+

One ID selector, two class, attribute or pseudo-class selectors, and no element selectors.

Does !important change the score?+

No. !important is a separate layer that overrides normal rules, so it is not part of the three numbers.

Is my data safe?+

Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.

Is this tool really free?+

Yes — completely free, no signup, no watermark and no usage limit.

More Free Tools

Guides you might like

All guides →
Chmod Calculatorchmod permissions explained: what 755, 644 and 777 actually mean
IP Subnet CalculatorCIDR and subnets: what /24, /26 and /20 really mean
Robots.txt Generatorrobots.txt explained: Allow, Disallow, wildcards and the mistakes that block your site
Sitemap XML Generatorsitemap.xml explained: what to include, the 50,000 URL limit and HTML sitemaps