CSS Tips

Highlighting the Current Page

I've used the following CSS method to highlight the current page in a web site. To work each page has to have a unique body ID and each link has to have a unique ID. Then in the CSS you use those selectors to highlight the current page. An example:

HTML

<body id="bodyhighlighting">
<ul>
<li><a href="highlighting.html" id="navhighlighting">Highlighting the Current page</a></li>
<li><a href="references.html" id="navreferences">References</a></li>
</ul>
</body>

CSS

body#bodyhighlighting a#navhighlighting,
body#bodyreferences a#navreferences{
font-weight : bold;
color : #000;
}
body#bodyhighlighting a:hover#navhighlighting,
body#bodyreferences a:hover#navreferences{
text-decoration : none;
}

In this example the following selector

body#bodyhighlighting a#navhighlighting

will select any a element with an id attribute that equals navhighlighting that is a descendant of a body element with an id attribute that equals bodyhighlighting and render it black and bold.

In a hover state the following selector

body#bodyhighlighting a:hover#navhighlighting

renders without the underline.

This method is used on this very page that you are viewing. Notice the left column "What's Inside" list item "Highlighting the Current page" (the current page) renders:

font-weight : bold;
color : #000;

If you click another page in that left column nav list, its style in turn renders:

font-weight : bold;
color : #000;

to highlight it being the current page. And the previous link is back to the default.

<< previous | next >>