Calculating Specificity

Learn to calculate specificity scores to predict which CSS rules win.

The Specificity Score

Specificity is calculated as three numbers: ID-Class-Element

Selector	IDs	Classes	Elements	Score
p	0	0	1	0-0-1
.class	0	1	0	0-1-0
#id	1	0	0	1-0-0

Counting Selectors

Count each part of the selector:

Pseudo-classes Count as Classes

:hover, :focus, :first-child all count as classes (0-1-0 each).

Pseudo-elements Count as Elements

::before, ::after, ::first-line count as elements (0-0-1 each).

Attribute Selectors = Classes

Comparing Scores

Compare from left to right:

Selector A	Selector B	Winner
1-0-0	0-10-0	A (1 > 0)
0-2-0	0-1-5	A (2 > 1)
0-1-3	0-1-2	A (3 > 2)

The Universal Selector

The * selector has zero specificity:

Exercise: Predict the Winner

Which selector wins?