Change link color of the current page with CSS

Question

How does one style links for the current page differently from others? I would like to swap the colors of the text and background.

HTML:

<ul id="navigation">     <li class="a"><a href="/">Home</a></li>     <li class="b"><a href="theatre.php">Theatre</a></li>     <li class="c"><a href="programming.php">Programming</a></li>  </ul> 

CSS:

li a{     color:#A60500; }  li a:hover{     color:#640200;     background-color:#000000; } 

Answer 1

With jQuery you could use the .each function to iterate through the links with the following code:

$(document).ready(function() {     $("[href]").each(function() {         if (this.href == window.location.href) {             $(this).addClass("active");         }     }); }); 

Depending on your page structure and used links, you may have to narrow down the selection of links like:

$("nav [href]").each ... 

If you are using URL parameters, it may be necessary to strip these:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ... 

This way you don't have to edit each page.