Explain CSS Selector Specificity

CSS Selector Specificity

Specificity determines which CSS rule applies when multiple rules target the same element.

Priority from Highest to Lowest

Level	Type	Example
Highest	!important	color: red !important
1000	Inline style	style="color: red"
100	ID selector	#header
10	Class, attribute, pseudo-class	.btn, [type="text"], :hover
1	Element, pseudo-element	p, div, ::before
0	Universal selector	*

How to Calculate

Specificity is represented as (a, b, c):

• a: Number of ID selectors
• b: Number of class / attribute / pseudo-class selectors
• c: Number of element / pseudo-element selectors

/* (0, 0, 1) = 1 */
p { color: red; }

/* (0, 1, 0) = 10 */
.text { color: blue; }

/* (1, 0, 0) = 100 */
#title { color: green; }

/* (1, 1, 1) = 111 */
#title .text p { color: purple; }

Common Pitfalls

• When specificity is equal, the later-defined rule wins
• !important overrides all other rules — avoid overusing it
• The :not() pseudo-class itself has no specificity, but the selector inside it does count