Unit 3 · CSS: the look and the layout
Why !important makes CSS harder to fix
!important only wins against rules without it. Once two rules both use it, specificity decides again, just louder. Each one you add makes the next override harder, so remove it and use a more specific selector.
The mix-up
What people often think
“!important always wins.”
What the tutor says
It only wins against rules without it. Once two rules both say !important, specificity decides again, just louder.
How it works
A common spiral: .title gets !important to win one fight, then .featured .title cannot override it, so that gets !important too, and so on. The stylesheet ends up fighting itself.
The clean fix is to take the !important out and let specificity do its job: .featured .title already beats .title. Check for other !important flags in the same area, because one left behind can block a variant that should win.
Side by side
.title { color: #222 !important; }
.featured .title { color: gold; } /* loses */.title { color: #222; }
.featured .title { color: gold; } /* wins */Close cousins of this mix-up
The tutor watches for these in the same lesson.
“Adding !important to the featured rule fixes it.”
That works today and breaks the next override tomorrow. Remove the !important on .title, and .featured .title wins because it is more specific.
“Only the !important on the title was causing trouble.”
The .card padding has one too, so .compact can never shrink it. Once it is gone, .compact wins the tie because it comes later.
Practise it with a tutor watching
The cascade and specificity
Predict which CSS rule wins when several target the same element, and fix fights without !important.
Free, no account needed.