Anchor class being overridden by what?

[snowlep]

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>

[Stevie D]

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:

1. Is one of the styles marked as !important? If so, use that one.
2. Is one of the styles inline (in the HTML)? If so, use that one.
3. Does one of the styles have more IDs in the declaration? If so, use that one.
4. Does one of the styles have more classes in the declaration? If so, use that one.
5. Does one of the styles have more elements in the declaration? If so, use that one.
6. Use the one that comes last in the parsed CSS.

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.

[snowlep]

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