CSS and specificity - class vs ids

Question

Consider the following html:

<div id="rightBar">
    <div class="barElement">
        <div class="barText"><a href="#">Not underlined</a><br /></div>
        <div class="barLinks"><a href="#">Should be underlined</a></div>
    </div>
</div>

And the following css:

#rightBar a
{
    text-decoration: none;
}
#rightBar a.barLinks
{
    text-decoration: underline;
}

The 'Should be underlined' link is not underlined, shouldn't it be since it inherits both the class barLinks and the id rightbar. Also the '#rightBar a.barLinks' (0, 1, 1, 1) has more specificity than '#rightBar a' (0, 1, 0, 1), so it should override the latter right?

How else can I get the 'Should be underlined' link to be underlined without resorting to using any inline specifications (both css or html)

Answer 1

Your a element does not have the class barLinks. Do this:

#rightBar .barLinks a
{
    text-decoration: underline;
}

example: http://jsfiddle.net/J34mj/2/