.notice { color: #334155; }\n.notice { color: #b91c1c; }Both rules select the same element; the second colour is the cascade result.
LESSON 11 OF 100
Rule order
Control the result when two rules have equal priority.
STEP 1 · LEARN
How it works
When origin, importance and specificity are equal, the declaration that appears later in the stylesheet wins.
.notice { color: #b91c1c; }\n.notice { color: #334155; }The values are valid, but the reversed order lets the grey colour win.
STEP 2 · APPLY
Your exercise
Complete the second .notice rule with #b91c1c and keep it after the grey rule.
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
- ○The second rule uses #b91c1c.
- ○The dark-red rule appears after the grey rule.
Explain the solution logic
When every other criterion is tied, the last applicable declaration determines the result.