CSS class priorities

Question

I have a question about the priority of CSS classes after encountering a problem today. The situation is as follows:

I have an unordered list which has a class associated with it. The LI tags have some styles defined too. I want to change the styling of the LIs after a click (via an added "selected" class), but the added class's styles are never applied. Is this normal behavior or should this code work?

CSS:

.dynamicList
{
    list-style: none;
}

.dynamicList li
{
    display: block;
    width: 400px;
    height: 55px;
    padding: 10px 10px 10px 10px;
    border: 1px solid #000;
    background-color: #ff0000;
}

.selectedItem
{
    background-color: #0000ff;
}

HTML:

<ul class="dynamicList">
  <li>First Item</li>
  <li class="selectedItem">Second (Selected) Item</li>
</ul>

The background color of the "selected" list item isn't changed. This is also the case if I don't apply the style to the LI element, but create another class and apply that to all the list items so it reads..

<li class="listitem selectedItem">xxxx</li>

score 26 · Accepted Answer · answered Jul 13 '09 at 15:35

26

This sounds like a CSS specificity problem. Try changing your .selectedItem ruleset to:

.dynamicList li.selectedItem {
  background-color: #0000ff;
}

answered Jul 13 '09 at 15:35

John Topley

113,588
46
195
237

Ah of course, what an idiot! thanks a lot for all the really quick answers! Cheers Stuart – Stuart Jul 13 '09 at 15:49

score 17 · Answer 2 · answered Jul 13 '09 at 15:33

The short answer is that your .selectedItem style isn't getting applied because the previous style is more specific and thus has a higher priority. Here is a decent rundown:

Now, let’s make a general list of the internal priorities for CSS (3 has the highest priority):
element
.class
#id
This is the default priority order. In addition to this, specificity will also count, f.ex ul li will override li. W3C has made a decent table over how you should calculate internal weight:
LI            {...}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {...}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL LI      {...}  /* a=0 b=0 c=3 -> specificity =   3 */
LI.red        {...}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity =  13 */
#list         {...}  /* a=1 b=0 c=0 -> specificity = 100 */

And here is the W3C specification.

score 7 · Answer 3 · answered Jul 13 '09 at 15:36

7

Change the selectedItem rule to:

.dynamicList li.selectedItem
{
    background-color: #0000ff;
}

answered Jul 13 '09 at 15:36

Matt Bridges

48,277
7
47
61

score 2 · Answer 4 · edited Aug 09 '13 at 09:49

2

A small addition that was not mentioned by cletus' post.
According to the W3C link, the highest priority is the style attribute used in the html element/tag.

E.g. if you have

<a id= bar style="color: red">foo</a>

and

<style>
#bar {
    color: blue;
}
</style>

The color will be red because the inline html style has the highest priority, higher than #.

edited Aug 09 '13 at 09:49

Touki

7,465
3
41
63

answered Aug 09 '13 at 07:34

Timo

2,922
3
29
28

I was made aware today that W3C is considered a bad source of information for code: http://www.w3fools.com – gersande Aug 09 '13 at 07:40
1

W3C is not a bad source, W3Schools is – Touki Aug 09 '13 at 09:45
I feel like a pupil so I like W3School, which gives you a lot of info on different topics with examples .. W3C is the oficial standard and an international community so it has to be good by definition, well.. – Timo Aug 10 '13 at 15:41

CSS class priorities

4 Answers4

Linked