⚡ Try a preset battle
A
Selector A
Score
0
,
0
,
0
A
—
B
—
C
—
B
Selector B
Score
0
,
0
,
0
A
—
B
—
C
—
// Specificity Battle Meter
SELECTOR A — (0,0,0)
(0,0,0) — SELECTOR B
0,0,0
0,0,0
// The Verdict
Enter two CSS selectors above to see which one wins in the cascade — and exactly why.
// Specificity Reference
A — IDs (100pts each)
#myId
#header
#nav-link
Each adds 1 to A
B — Classes, Attrs, Pseudo-classes (10pts each)
.className
[type="text"]
:hover :focus :nth-child(n)
:not() counts inner selector
C — Elements, Pseudo-elements (1pt each)
div p span a
::before ::after
::placeholder ::marker
* has no specificity