CSS Specificity Explained: How the Cascade Really Works
Master CSS specificity rules. Understand why your styles are not being applied and how to calculate specificity for any CSS selector.
By RiseTop Team · May 2026 · 8 min read
CSS specificity determines which styles are applied when multiple rules target the same element. Understanding specificity is essential for debugging CSS conflicts.
Specificity Calculation
Selector Type
Example
Specificity
Inline style
style attribute
1-0-0-0
ID
#header
0-1-0-0
Class, attribute, pseudo-class
.btn, [type=text], :hover
0-0-1-0
Element, pseudo-element
div, ::before
0-0-0-1
Universal
*
0-0-0-0
How the Browser Decides
Find all declarations that apply to the element
Sort by importance: !important beats normal
Sort by specificity: higher wins
Sort by source order: later wins when specificity is equal
Avoid !important: It breaks the natural cascade and makes debugging harder. Increase specificity instead.
Frequently Asked Questions
When should I use !important? +
Almost never. The only valid use case is overriding inline styles from third-party code that you cannot modify.
How do I check specificity? +
Browser DevTools shows which rule is applied and which rules are overridden (strikethrough). You can also use online specificity calculators.
Does specificity affect performance? +
Minimally. Modern browsers are very efficient at matching selectors. Focus on specificity for maintainability.