CSS Rule Priorities

Question

Given the following mark-up...

<div id="Header">
     <a href="#" class="Highlight">foo</a>
</div>

And the following stylesheet...

/******************Exceptions******************/
#Footer, #Header,
#Footer a, #Header a { color: #f8f8f8; }


/******************Classes******************/
.Highlight, a.Highlight { color: #B1D355; }
.Notification, a.Notification { color: Red; }

Why is my link still off-white (F8F8F8) rather than green (B1D355)?

Shouldn't using the class Highlight override the color settings for Header and Footer since it comes after their declarations?

Answer 1

It's all about weight. A class selector gets trumped by an ID selector.

#Footer a

will always get precedence over

.Highlight or .Highlight a

Make your selector

#Footer .highlight a

and you should be fine.

Answer 2

ID has a higher priority than class in CSS:

Use #Header a.Highlight { color: #B1D355; }

Answer 3

CSS rules are not just applied based on the "last parsed, last applied". It also depends on how specific and unique the rule is to that element. Since you're only specifying a class selector, the path that included the id is getting a higher priority.