CSS specificity determines which style rule takes precedence when multiple selectors target the same element. The browser calculates a selector’s weight based on the types of selectors it contains. Higher specificity overrides lower specificity when competing rules apply.
| Selector Type | Specificity Weight | Example | Notes |
|---|---|---|---|
| Inline Style | 1000 | style="color:red;" |
Highest normal specificity, applied directly in HTML |
| ID Selector | 100 | #header |
Very strong selector, use sparingly in CSS architecture |
| Class Selector | 10 | .hero |
Primary selector type for reusable components |
| Attribute Selector | 10 | input[type="text"] |
Same weight as classes |
| Pseudo-Class | 10 | a:hover |
State/condition selectors count like classes |
| Element / Type Selector | 1 | p, section |
Weak baseline selectors |
| Pseudo-Element | 1 | ::before |
Counts like element selectors |
| Universal Selector | 0 | * |
No specificity weight |
The following examples show how selector weights are added together in practice. Each selector’s total specificity is the sum of its component selector weights. When two selectors have equal specificity, the rule appearing later in the stylesheet wins.
| Selector | Calculation | Total Weight |
|---|---|---|
p |
1 element | 1 |
.hero p |
1 class + 1 element | 11 |
#main .hero p |
1 ID + 1 class + 1 element | 111 |
nav ul li a:hover |
1 pseudo-class + 4 elements | 14 |