Question

I have inherited a very large CSS file, and I added a specific id as follows:

#specialLink a, #specialLink a:link, #specialLink a:active, #specialLink a:visited
{
    border:solid 1px #000000; 
    background-color:#CC0000;
}

However, when I use it in a link, as in <a id="specialLink" href="whatever.htm">Test Link</a>, it completely ignores the border attribute above, but respects the background-color attribute.

I was led to believe that an id tag in CSS has ultimate priority, so what could be causing the border attribute to be completely ignored?

Answer 1

Your selector is incorrect. You have:

#specialLink a {}

This will match anchor elements that are descendents of an element with the ID #specialLink:

<div id="specialLink">
    <a href="#">Anchor</a>
</div>

What you want is:

a#specialLink {}

So that the selector will match:

<a href="#" id="specialLink">Anchor</a>