The basic idea is to assign each link a unique ID so that when they are placed inside a box with a specified class only the corresponding link will have the current state. This way you can have the same unordered list navigation code on every page or have it included and still apply the current state CSS.
In this example the link with ID nav1 will have the current state CSS applied to it. To apply the current state CSS to another link you would just change the class of the containing box.
Example Code:
<div class="nav1"> <ul> <li id="nav1"><a href="link.html">Link</a></li> <li id="nav2"><a href="link.html">Link</a></li> <li id="nav3"><a href="link.html">Link</a></li> <li id="nav4"><a href="link.html">Link</a></li> <li id="nav5"><a href="link.html">Link</a></li> </ul> </div>
Example CSS:
.nav1 #nav1 a,
.nav2 #nav2 a,
.nav3 #nav3 a,
.nav4 #nav4 a,
.nav5 #nav5 a {
color: #FF0066;
}