Anchor class being overridden by what?

HTML & CSS
1

I have a list of links and they are all styled generally. However I want to modify that general style on a specific anchor (FirstLink) with a class (for example here, background:blue), but it’s having no effect. I can’t figure out what/why it is being overwritten.


<style type="text/css">
#navigation {
list-style:none;
display:table;
margin:12em auto 0;
}
#navigation li {
display:table-cell;
font:1.8em/2.1em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#navigation a,#navigation a:link,#navigation a:visited,#navigation a:active,#navigation a:hover,#navigation a:focus
{color:#F5FFF5;
text-decoration:none;
display:block;
padding:0 1.2em;
background:#A11123;}
#navigation a:hover{background:black;}
a.FirstLink {background:blue;}
a.FirstLink:link {background:blue;}
a.FirstLink:visited {background:blue;}
a.FirstLink:hover {background:blue;}
a.FirstLink:focus {background:blue;}
a.FirstLink:active {background:blue;}
</style>

<ul id="navigation">
	<li><a href="#" class="FirstLink">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Forum</a></li>
	<li><a href="#">Archive</a></li>
	<li><a href="#">Contact</a></li>
</ul>
2

[font=verdana]You have run foul of the specificity rules.

Put simply, if you have two style rules targeting the same element (in this case, both targeting the <a>), the browser will run through the following checklist:

[list=1][]Is one of the styles marked as !important? If so, use that one.
[]Is one of the styles inline (in the HTML)? If so, use that one.
[]Does one of the styles have more IDs in the declaration? If so, use that one.
[]Does one of the styles have more classes in the declaration? If so, use that one.
[]Does one of the styles have more elements in the declaration? If so, use that one.
[]Use the one that comes last in the parsed CSS.[/list]
Here, you’re up against “2”. The declaration #navigation a {...} includes an ID, whereas the declaration a.FirstLink {...} doesn’t.

If you will only ever have one FirstLink on a page, you could just change that from a class to an ID, and you’re sorted. If there could be more than one FirstLink on a page, you could either add !important to the FirstLink declarations (which is not recommended, because you never know what else it might override), or you could change the declaration to #navigation a.FirstLink {...} all the way down. Then the two would be equal on IDs and so it would come down to classes, and the FirstLink ones would win through.[/font]

3

Thank you, I had no idea of the first 5 points of that checklist.