CSS Specificity Calculator — Free Online Tool

Score any CSS selector. CSS Specificity Calculator is a free online tool from the ToolsRift CSS Generators collection. It runs entirely in your browser — nothing to install, no signup, and your data never leaves your device.

Loading CSS Specificity Calculator…

How to use CSS Specificity Calculator

  1. Open the CSS Specificity Calculator above — it loads instantly, no account needed.
  2. Enter or upload your input. Everything is processed locally on your device.
  3. Get your result immediately and copy or download it with one click.

Frequently asked questions

What is CSS specificity?

A weight the browser assigns to a selector to decide which rule wins. It is expressed as three numbers: IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements.

Does the universal selector add specificity?

No — the universal selector * has zero specificity and is ignored.

How is :not() scored?

The :not() and :is() pseudo-classes take the specificity of their most specific argument, while :where() always contributes zero.

More CSS Generators

CSS Pattern Generator
Create pure-CSS background patterns from gradients, no images
Cubic Bezier Editor
Build cubic-bezier easing curves with a live animated preview
CSS Text Stroke Generator
Add outlined text with -webkit-text-stroke and live preview
CSS Outline Generator
Generate outline width, style, color and offset with preview
CSS Backdrop Filter Generator
Build backdrop-filter blur, brightness and saturation effects
CSS Blend Mode Generator
Preview all mix-blend-mode values on overlapping shapes

← View all CSS Generators