Goal
You’ll be able to predict which CSS rule actually wins when two or more rules conflict, understand the full priority order the cascade actually follows, and know why relying on !important regularly causes more problems than it solves.
Learn
CSS stands for Cascading Style Sheets for a reason: when multiple rules target the same element and the same property, they don’t just overwrite each other randomly or apply in some mysterious order. There’s a real, fully predictable priority system:
- Importance — a rule marked
!importantbeats a normal rule, regardless of specificity or source order. - Specificity — among normal rules, more specific selectors win over general ones. Roughly, in increasing order of power: element selectors, class selectors, ID selectors. Inline styles (directly on the element via the style attribute) beat all of these.
- Source order — if two rules have exactly equal specificity, whichever one appears later in the stylesheet (or later in the page, if styles come from multiple places) wins.
Specificity itself is often described using a point system: element selectors are worth roughly 1 point, classes are worth roughly 10, and IDs are worth roughly 100. A selector’s total specificity is the sum of everything in it — so .card p (a class plus an element) has more specificity than plain p alone, but less than #sidebar p (an ID plus an element). This point system isn’t official CSS syntax you write, but it’s a genuinely useful mental model for comparing two selectors’ relative power at a glance.
Regarding !important: it exists for real edge cases (like overriding third-party CSS you can’t otherwise touch), but using it as a routine fix creates a hidden problem. Once you mark something !important, overriding it later requires either an even more specific selector combined with another !important, or removing the original entirely. Used casually across a project, it becomes a kind of specificity arms race, where the cascade stops being predictable at all.
Decision Task
Given this CSS, what color will the paragraph’s text actually be?
p { color: blue; }
.intro { color: green; }
#main-text { color: red; } <p id="main-text" class="intro">Hello</p>
Decide before reading on: blue, green, or red?
Reveal the Answer
Red. All three rules technically apply to this paragraph, but ID selectors have higher specificity than class selectors, which in turn beat plain element selectors. The ID rule wins regardless of where it appears in the file — specificity is checked before source order, not the other way around.
Common Mistake
A common panic-fix when a style “isn’t working” is to slap !important on it without first checking why the existing rule isn’t winning. This often works in the moment, but creates a hidden landmine: the next person (or you, later) trying to override that same property now has to fight the !important too, often resorting to another !important, and the cascade stops being a reliable, predictable system at all — it becomes a stack of forced overrides.
Practice Questions
1. Given .btn { color: white; } and button.btn { color: black; } applied to the same button, which wins, and why?
Show Answer
button.btn wins — it combines an element and a class, giving it higher specificity than the class-only rule.
2. Two rules have exactly equal specificity: one at the top of the stylesheet, one at the bottom. Which one wins?
Show Answer
The one at the bottom (later source order wins when specificity is equal).
3. Roughly rank these three selectors from lowest to highest specificity: #nav, nav, .nav-link.
Show Answer
nav (element, lowest) → .nav-link (class, middle) → #nav (ID, highest).
4. True or False: source order matters more than specificity when two rules conflict.
Show Answer
False — specificity is checked first; source order only matters as a tiebreaker when specificity is exactly equal.
5. You’re maintaining a project full of !important rules left by a previous developer, and you need to override one of them. What are your two realistic options, based on this lesson?
Show Answer
Either write an equally or more specific selector combined with your own !important, or remove/edit the original !important rule directly — both are real options, and this lesson explains why the second is generally healthier long-term.
Try It Yourself
Using the same three rules from the Decision Task, what would the text color be if the element had no id attribute at all, only class="intro"? Work it out before
Show Answer
with no ID rule competing, the class rule (green) beats the plain element rule (blue), so the answer is green.
Quick Check
1. Which wins: a class selector or an ID selector, when both target the same element?
Show Answer
ID selector.
2. If two rules have equal specificity, which one wins?
Show Answer
Whichever one appears later in the stylesheet.
3. Why is !important risky to rely on regularly?
Show Answer
It breaks the predictable specificity order, making future overrides harder and forcing a cascade of more !important rules.
4. Using the same three rules from the Decision Task, what would the text color be if the element had no id attribute at all, only class="intro"? Work it out before
Show Answer
with no ID rule competing, the class rule (green) beats the plain element rule (blue), so the answer is green.
5. Given this CSS, what color will the paragraph’s text actually be?
Show Answer
Red. All three rules technically apply to this paragraph, but ID selectors have higher specificity than class selectors, which in turn beat plain element selectors. The ID rule wins regardless of where it appears in the file — specificity is checked before source order, not the other way around.