CSS Specificity
CSS specificity determines which style rule will apply when multiple rules target the same element. It is essential for understanding stylesheet conflicts.
Basic concepts
Specificity is a numeric value that the browser uses to weight rules. Elements, classes, and IDs have different scores.
The following example shows how element, class, and ID selectors take effect.
Scoring system
Specificity values consist of different categories: inline style, ID, class, and element. The higher the score, the stronger the rule.
| Selector | Specificity value |
|---|---|
| Element selector (p, div) | 0-0-1 |
| Class selector (.class) | 0-1-0 |
| ID selector (#id) | 1-0-0 |
| Inline style | 1-0-0-0 (highest) |
Using !important
The !important declaration overrides all specificity, so it must be used with caution. Use it only if there is truly no other solution.
Tips for specificity
Managing specificity helps keep the code clean and prevents display errors. Here are some practical tips:
- Avoid selectors with very high specificity to make overriding easier.
- Organize logically and use classes instead of IDs whenever possible.
- Keep the use of !important to a minimum to avoid unreadable conflicts.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
