CSSAWWWARDS
+ Submit tool
Built-in toolFree · No signup

CSS Specificity Calculator

Type one or more CSS selectors and instantly see their (a, b, c) specificity breakdown. Compare selectors side by side, ranked by weight, with visual bar charts for ID, class, and element counts.

Share:

CSS Selectors (one per line)

10 selectors

Specificity Legend

a

ID selectors

#foo, #header

b

Class / attr / pseudo-class

.foo, [attr], :hover

c

Type / pseudo-element

div, p, ::before

Ranked by specificity

#1#header .nav > li:nth-child(2) a:hover
1a3b6cscore:10306
ID
1
Cls
3
El
6
Tot
10306
#2#id .class > p:hover
1a2b4cscore:10204
ID
1
Cls
2
El
4
Tot
10204
#3#id
1a0b1cscore:10001
ID
1
Cls
0
El
1
Tot
10001
#4.container > .row + .col::before
0a3b5cscore:305
ID
0
Cls
3
El
5
Tot
305
#5input[type="text"]:focus
0a2b3cscore:203
ID
0
Cls
2
El
3
Tot
203
#6body > header nav.main ul li a::after
0a1b9cscore:109
ID
0
Cls
1
El
9
Tot
109
#7nav ul li a.active
0a1b5cscore:105
ID
0
Cls
1
El
5
Tot
105
#8.class
0a1b1cscore:101
ID
0
Cls
1
El
1
Tot
101
#9p
0a0b1cscore:1
ID
0
Cls
0
El
1
Tot
1
#10*
0a0b0cscore:0
ID
0
Cls
0
El
0
Tot
0
⚠️

About !important

!important overrides specificity entirely — any declaration with it wins over all non-important declarations regardless of score. It is detected and flagged above but not factored into the numeric score.

How to use

01

Type your selectors

Enter one CSS selector per line in the textarea. Pre-loaded examples help you get started.

02

Read the (a,b,c) chips

Purple = ID selectors, Blue = class/attribute/pseudo-class, Green = type selectors and pseudo-elements.

03

Compare by rank

Results are ranked highest specificity first. The total score bar shows relative weight at a glance.

04

Copy the table

Use 'Copy table' to grab a formatted plain-text version of all results.