Loading…

How to use CSS Specificity Calculator

Paste a CSS selector, and the tool scores its specificity as an (a, b, c) triple and explains how it was calculated.

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
CSS Mask Fade Generator
Fade element edges with mask-image linear gradients
CSS 3D Perspective Generator
Rotate elements in 3D space with perspective and live preview
CSS Aspect Ratio Generator
Get aspect-ratio plus the padding-hack fallback for any ratio
CSS Multi-Column Generator
Build newspaper-style column-count layouts with column rules
CSS Object Fit Generator
Preview object-fit and object-position on images live
CSS Line Clamp Generator
Truncate multi-line text with -webkit-line-clamp ellipsis

← View all CSS GeneratorsBrowse all 1,100+ tools →