#hero { background-color: #dbeafe; }\n.banner { background-color: #e2e8f0; }The element with both ID and class keeps the #hero background.
LESSON 17 OF 100
An ID beats a class
Compare ID specificity with class specificity.
STEP 1 · LEARN
How it works
The ID component of specificity is compared before classes and types, so a matching ID beats a normal class selector.
.banner { background-color: #dbeafe; }\n.banner { background-color: #e2e8f0; }With two identical class selectors, the second background wins by source order.
STEP 2 · APPLY
Your exercise
Complete the #hero rule with #dbeafe and keep the .banner rule after it.
index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK
What needs to pass
0%not checked
- ○#hero has the requested background.
- ○.banner keeps the general rule.
- ○The class rule appears after the ID rule.
Explain the solution logic
The ID wins through its specificity component even though the class is declared later.