CSS Rule Priorities

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?

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.

CSS priority

1. ID selector > class selector > attribute selector

2. For the same priority, the later has the higher priority.

   .class1 { color: black; }

   .class2 { color: red; }

   It will be red.

3. To have more priority, use !important

For your problem, #Footer is an ID selector has higher priority than .Highlight, a class selector.

ID has a higher priority than class in CSS:

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

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.