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.
HTML Code:
<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>