juniorCSS
What is CSS Specificity?
Updated Apr 28, 2026
Short answer
Specificity is the algorithm browsers use to decide which CSS property values are the most relevant to an element and will be applied.
Deep explanation
Specificity is a weight applied to a given CSS declaration based on the selector type. Inline styles have the highest weight, followed by IDs, then classes/pseudo-classes/attributes, and finally element/pseudo-element selectors. The universal selector (*) has no specificity value.
Real-world example
Overriding a default theme style in a UI framework without using !important.
Common mistakes
- Using !important to override styles instead of writing more specific selectors, leading to unmaintainable code.
Follow-up questions
- How do you calculate specificity?