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> 

Answer 1

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

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

Answer 2

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.