Josh Curren Josh Curren - 3 months ago 12
CSS Question

How to change the link color of the current page with CSS

How do I display the link for the current page different from the others? I would like to swap the colors of the text and background.

This is what I currently have:

The HTML:

<div id="header">
<ul id="navigation">
<li class="bio"><a href="http://www.jacurren.com/">Home</a></li>
<li class="theatre"><a href="http://www.jacurren.com/theatre.php">Theatre</a></li>
<li class="prog"><a href="http://www.jacurren.com/programming.php">Programming</a></li>
<li class="resume"><a href="http://www.jacurren.com/resume.php">R&eacute;sum&eacute;</a></li>
<li class="portf"><a href="http://www.jacurren.com/portfolio.php">Portfolio</a></li>
<li class="contact"><a href="http://www.jacurren.com/contact.php">Contact</a></li>
</ul>
</div>


The CSS:

#navigation{
margin:0;
padding:0;
background:#000000;
height:34px;
list-style:none;
position: relative;
top: 80px;
}
#navigation li{
float:left;
clear:none;
list-style:none;
}
#navigation li a{
color:#A60500;
display:block;
font-size:12px;
text-decoration:none;
font-weight:bold;
padding:10px 18px;
}
#navigation li a:hover{
color:#640200;
background-color:#000000;
}

Answer

a:active : when you click on the link and hold it (active!).
a:visited : when the link has already been visited.

If you want the link corresponding to current page to be highlighted, you can define some specific style to the link -

.currentLink {
   color: #640200;
   background-color: #000000;
}

Add this new class only to the corresponding li (link), either on server-side or on client-side (using javascript).