How is specificity scored?

As three counts: IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements.

Does it account for inline styles or !important?

No, it only scores selector text; inline styles and !important always take precedence separately.

Can I compare many selectors at once?

Yes, enter one selector per line and see them ranked automatically.

Is my data uploaded to a server?

No. This tool runs entirely in your browser using standard web APIs, so your input never leaves your device and nothing is logged or stored on our servers.

Does it work offline and on mobile?

Yes. Once the page has loaded it keeps working without a network connection, and the layout is responsive so it stays usable on phones and tablets.

CSS Specificity Calculator

Compare and rank the specificity of CSS selectors.

Support

Works Offline

Privacy First

No Login

No API

Selectors

One selector per line

Specificity results

#header

IDs

Classes/Attrs/Pseudo

Elements

.nav a:hover

IDs

Classes/Attrs/Pseudo

Elements

ul li.item

IDs

Classes/Attrs/Pseudo

Elements

div > p::first-line

IDs

Classes/Attrs/Pseudo

Elements

IDs

Classes/Attrs/Pseudo

Elements

Ranked by specificity (highest first)

1. #header (1,0,0)2. .nav a:hover (0,2,1)3. div > p::first-line (0,1,3)4. ul li.item (0,1,2)5. * (0,0,0)

About the CSS Specificity Calculator

Paste multiple CSS selectors to compute their specificity score based on ID, class/attribute/pseudo-class, and element/pseudo-element counts, then see them ranked from highest to lowest specificity.

Examples

Selector list

#header
.nav a:hover

Output

#header → (1,0,0)
.nav a:hover → (0,2,1)

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

CSS Unit Converter

HTML & CSS

Convert between px, rem, em, %, pt, vw, and vh.

Font Pairing Preview

HTML & CSS

Preview heading and body font combinations live.

HTML Entity Cheatsheet

HTML & CSS

Searchable reference of common HTML character entities.

HTML Viewer with CSS & JS Tabs (Live Preview)

HTML & CSS

Edit HTML, CSS, and JS in tabs with an instant sandboxed live preview.

Tailwind Class to CSS

HTML & CSS

Translate common Tailwind utility classes into plain CSS.

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-09 · Runs entirely in your browser