Question

This is the html code i am using…….

<ul id="top_options">
<li>Discussions</li> 
<li>Tags</li> 
<li>Users</li>
<li class="selected_top_option">Unaddressed</li> 
<li>New Discussion</li> </ul>

and this is the CSS part i am using for the above code…

#top_options
{
    display:inline;
    float:left;
}
#top_options li
{
    list-style:none;
    display:inline;
    margin-right:20px;
    background-color:#ADADAD;
    color:#FFF;
    font-size:16px;
    font-weight:bold;
    line-height:50px;
    padding-left:8px;
    padding-right:8px;
    font-family:Arial, Helvetica, sans-serif;
}
#top_options li:hover
{
    background-color:#FF8000;
    cursor:pointer;
}
.selected_top_option
{
    background-color:#F00;
    border:dotted;
}

The Problem is the ‘Unaddressed’ list item should be displayed in #F00 background color, but it is being displayed in #ADADAD background color, but it is getting the border specified. What is the point i am missing here.?

Answer 1

It’s because of specificity – when you define the same CSS attribute in two different ways for the same element, the CSS attribute in the more specific selection method is the one applied.

#top_options li is more specific than .selected_top_option and so its definition of background-color is the one applied. Think of it this way – there can only be one thing with that id so that is very specific, but there can be many things with that class, so that is less specific. As such, the id wins out.

Based on the linked HTML Dog article (this isn’t exactly how specificity is calculated, as it ignores !important for instance, but it’s a great quick and easy calculation method), the specificity is:

.selected_top_option = 10 (1 class selector)
#top_options li = 101 (1 id selector + 1 element selector)

So in this case, 101 is higher (i.e. more specific) and wins out whenever there’s a conflict between these two.

Another good article on specificty is this Smashing Magazine article and there are plenty more on Google.

The solution is to make .selected_top_option more specific. I’d recommend either:

#top_options li.selected_top_option { /* your css here */ } 
.selected_top_option { background-color: #F00 !important; /* rest of css */ }

However, I’d recommend against the !important in most cases, simply because it makes it more complicated to override later.