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

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.