Coders Hub logoCoders Hub

CSS Specificity Calculator

Compare and rank the specificity of CSS selectors.

Works Offline
Privacy First
No Login
No API

Selectors

One selector per line

Specificity results

#header

IDs
1
Classes/Attrs/Pseudo
0
Elements
0

.nav a:hover

IDs
0
Classes/Attrs/Pseudo
2
Elements
1

ul li.item

IDs
0
Classes/Attrs/Pseudo
1
Elements
2

div > p::first-line

IDs
0
Classes/Attrs/Pseudo
1
Elements
3

*

IDs
0
Classes/Attrs/Pseudo
0
Elements
0

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)

Related tools

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

Clip Path Generator

HTML & CSS

Design polygon clip-path shapes with a live preview.

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Filter Playground

HTML & CSS

Tune blur, brightness, contrast, and more with a live preview.

Frequently asked questions

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