CSS nav bar current page color alteration - css

Question

I'm trying to make it so that I can add a class to the link for the current page and the background will stay filled in teal (As it would when hovered)
However, as it is at the moment, the link text is displaying in the teal still(pic part 1), even though the css says display it white (pic part 2)
the css I have is:
#nav a:link, a:visited {
font-weight: bold;
color: #066;
text-align: center;
padding: 8px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover, a:active {
display: block;
background-color: #066;
color: #fff;
}
#nav a.selected:link, a.selected:active{
display: block;
background-color: #066;
color: #fff;
}
#nav a.selected:hover, a.selected:active {
display: block;
background-color: #066;
color: #fff;
}
the html is
<div id="nav">
<ul>
<li >HOME</li>
<li>ABOUT</li>
<li>SOLUTIONS</li>
<li>CONSULTANCY</li>
<li>SUPPORT</li>
<li>CONTACT US</li>
</ul>
</div>
When I inspect the element in firefox, its showing that the color should be white. So it should be showing correctly, but it's not. Any idea what I'm doing wrong? I've cleared cache and that didnt sort it.

Answer 1

Change this
#nav a.selected:link, a.selected:active {
to this
#nav a.selected:link, a.selected:visited{
FIDDLE
You are tried to set active twice.

Answer 2

You have styled all the states for the selected item but not the default just add the selector for the item without state:
#nav a.selected, #nav a.selected:link, a.selected:active
#nav a:link,
a:visited {
font-weight: bold;
color: #066;
text-align: center;
padding: 8px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover,
a:active {
display: block;
background-color: #066;
color: #fff;
}
#nav a.selected, #nav a.selected:link,
a.selected:active {
display: block;
background-color: #066;
color: #fff;
}
#nav a.selected:hover,
a.selected:active {
display: block;
background-color: #066;
color: #fff;
}
<div id="nav">
<ul>
<li>HOME
</li>
<li>ABOUT
</li>
<li>SOLUTIONS
</li>
<li>CONSULTANCY
</li>
<li>SUPPORT
</li>
<li>CONTACT US
</li>
</ul>
</div>

Answer 3

:active is a state but :link not. Link is referring to the attr of the anchor so
Change
#nav a.selected:link, a.selected:active
to
#nav a[href].selected, a.selected:active
#nav a:link, a:visited {
font-weight: bold;
color: #066;
text-align: center;
padding: 8px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover, a:active {
display: block;
background-color: #066;
color: #fff;
}
#nav a[href].selected, a.selected:active{
display: block;
background-color: #066;
color: #fff;
}
#nav a.selected:hover, a.selected:active {
display: block;
background-color: #066;
color: #fff;
}
<div id="nav">
<ul>
<li >HOME</li>
<li>ABOUT</li>
<li>SOLUTIONS</li>
<li>CONSULTANCY</li>
<li>SUPPORT</li>
<li>CONTACT US</li>
</ul>
</div>

Answer 4

Try this :
Simply change this css #nav a.selected:link, a.selected:active with #nav a.selected, a.selected:active and your problem will solve