CSS and specificity - class vs ids - css

Question

Consider the following html:
<div id="rightBar">
<div class="barElement">
<div class="barText">Not underlined<br /></div>
<div class="barLinks">Should be underlined</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/

Answer 2

It's not a specificity issue, you are using the wrong selector. It should be this:
#rightBar .barLinks a {}

Answer 3

#rightBar a.barLinks
{
text-decoration: underline;
}
Won't work because the class="barLinks" isn't on the <a>
Try this;
#rightBar .barLinks a
{
text-decoration: underline;
}
Or failing that;
#rightBar .barLinks a
{
text-decoration: underline !important;
}

Answer 4

It shouldn't be, the barLinks is only applicable to a tags, if you change your css to #rightBar .barLinks a it should work.

Answer 5

So the problem I see here is that you have mentioned an incorrect address to reach to your anchor tag element using the CSS selector. If you are going for a longer and more prominent address route then it should be as follows:
#rightbar .barElement .barLinks a{
text-decoration : underline;
}
But since you are looking for a more specific one, your approach was correct except for the fact the anchor tag does not have a class of its own, therefore a.barLink would find nothing. It should rather be as :
#rightBar .barLinks a{
text-decoration : underline;
}