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?

score 13 · Accepted Answer · answered May 20 '10 at 18:11

13

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.

answered May 20 '10 at 18:11

Robusto

31,447
8
56
77

10

Yep, and http://www.htmldog.com/guides/cssadvanced/specificity/ gives a decent "in depth" explanation. – Arve Systad May 20 '10 at 18:16
Figured. I guess I'll need to rethink my style structure. Thanks! – Adam Ritenauer May 20 '10 at 18:21

score 8 · Answer 2 · answered Mar 06 '14 at 03:42

8

CSS priority

ID selector > class selector > attribute selector
For the same priority, the later has the higher priority.

.class1 { color: black; }

.class2 { color: red; }

It will be red.
To have more priority, use !important

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

answered Mar 06 '14 at 03:42

SweenEy

81
1
2

The [use of `!important` should be considered very carefully](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). – surfmuggle Oct 13 '17 at 11:24

score 2 · Answer 3 · answered May 20 '10 at 18:12

2

ID has a higher priority than class in CSS:

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

answered May 20 '10 at 18:12

Amy B

17,874
12
64
83

score 1 · Answer 4 · answered May 20 '10 at 18:13

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.

CSS Rule Priorities

4 Answers4

CSS priority

Linked