You added .warning { color: ... }, pressed Run, and the text is the same grey
it was before. No error, nothing in the console. A rule that never applies looks
exactly like a rule you forgot to write.
Something more specific already set that colour. When two rules set the same
property on the same element, the browser scores each selector by counting what
is in it:
ids first (#panel)
then classes (.warning), attributes, and pseudo-classes like :hover
then plain tag names (p)
Compare the counts column by column, left to right, and the first column that
differs decides it outright. One id beats any number of classes; one class beats
any number of tags. #panel p carries one id and one tag. .warning carries one
class. The id column settles it before the class column is ever read.
"Whichever is written last wins" is the rule most people carry, and it is real -
but only as the tiebreak, for selectors that score identically. These two do not,
so moving your rule to the bottom of the file changes nothing.
That leaves two fixes: raise your rule until it outscores the other one, or lower
the other one. There is a third thing you can type. !important does turn the
text red, and it also lifts that declaration out of the counting entirely, so the
next person who has to override it has nothing left to reach for except another
!important. It buys today's fix with tomorrow's, which is a debt, not a fix.
Your task: make the warning line red. The .warning rule already has the
colour you want - it just never wins. Leave the other two notes the grey they
are now.
You'll practice:
Reading two selectors and working out which one the browser will pick
Fixing a rule that loses, without reaching for !important
Related reading: Selectors and the Cascade →
Next