🎯Dev

CSS Specificity Calculator

Compute the specificity (a, b, c) of a CSS selector — IDs, classes/attributes/pseudo-classes, elements. Useful to understand why your rule is not applying. Everything in your browser.

IDs (a)

—

classes/attributes/pseudo (b)

—

elements (c)

—

Score (a, b, c)

—

Calculate a CSS selector's specificity

When a CSS rule simply won't apply, specificity is usually the one to blame. It's the point system that decides which selector wins when two compete for the same element. Paste a selector here and you get its specificity laid out clearly.

The value shows up split across the three levels that count: IDs first, then classes, attributes and pseudo-classes, and finally elements and pseudo-elements. With that breakdown in front of you, it becomes obvious why a #id beats ten classes, or why your rule keeps getting overridden. Writing more predictable CSS follows naturally from there.

Because the calculation happens inside your browser, you just paste the selector to see its weight. A handy companion when you're chasing down style conflicts.

Frequently asked questions

What do the three numbers in the result mean?

They are the three specificity columns, in a, b, c order. The first counts IDs, the second counts classes, attributes and pseudo-classes, and the third counts elements and pseudo-elements. The selector waiting in the box, #main .nav li:hover, scores (1, 2, 1): one ID, two in the middle column (.nav and :hover) and one element (li). Comparison runs column by column from the left, which is why (1, 0, 0) beats (0, 9, 9) with nothing ever spilling from one column into the next.

Why do :not() and :is() add nothing here?

Because the tool removes those whole groups before counting, and the score lands below the real one. Per the spec, :is(), :not() and :has() take on the specificity of the strongest argument they carry, so div:not(#id) is worth (1, 0, 1) while the page reports (0, 0, 1). Only :where() truly counts as zero, and there the arithmetic agrees. When the selector under investigation holds an ID or a class inside :not(), add the difference by hand.

Can I paste a comma-separated selector list?

You can paste it, but the number will be wrong: the tool treats the whole string as a single selector and adds the parts up. "h1, h2" returns (0, 0, 2) when each one scores (0, 0, 1) on its own, since in a list every selector carries its own specificity and the browser weighs them one at a time. Paste one per go. Worth remembering what stays outside the count too: !important and an inline style attribute never enter the score and beat any value worked out here.

Related Tools

PX to REM and EM Converter

Type a pixel, rem or em value and the other two update live from your root font size, 16px by default, plus a table from 8 to 96 px in pt too.

📐

CSS Unit Converter

Convert between px, em, rem, %, pt, vh, vw for common design values — configurable 16 px base. Everything in your browser.

🎨

Mesh Gradient Generator

Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.

🌬️

Tailwind Config CLI Generator

Generate a ready-to-use tailwind.config.js for the Tailwind CLI, with content paths and theme set up. Copy it and start styling in seconds.

🟢

CSS Neumorphism Generator

Create Soft UI (neumorphism) effects with two complementary box-shadows. Adjust base color, distance, blur and type (raised, flat, pressed). Copy ready CSS. Everything in your browser.

🌈

CSS Gradient Generator

Create linear and radial CSS gradients with real-time preview. Adjust colors, positions and angle. Copy the CSS code with one click.