[thelist] a:active does this work for a menu item?

Sarah Sweeney mr.sanders at designshift.com
Thu Jun 17 09:14:09 CDT 2004

Justin Zachan wrote:
> Hi there. I have a menu designed using CSS etc. All looks nice.
> What I want is for the active link on the menu to be highlighted in a
> certain way.
> i.e. click on "about", it goes to about.htm, and the "about" link has an
> active effect.
> I tried using a:active but it doesn't seem to work when you move to a new
> page.
> Anyway point me in the right direction for this effect.?


The a:active pseudo-element is actually meant to set a style for when 
the link is clicked on (or when a user tabs to the link and hits enter). 
The easiest and most elegant (in my opinion) way to achieve the effect 
you're after is this:
- set a class in your body tag like this, changing the class as needed 
for each individual page:
   <body class="about">
- in your menu, add classes to the links, something along these lines:
     <li><a href="index.html" class="home">home</a></li>
     <li><a href="about.html" class="about">about</a></li>
     <li><a href="contact.html" class="contact">contact</a></li>
- add this to your CSS:
   body.home a.home, body.about a.about, body.contact a.contact
     color: red; /* or whatever you want the style to be */


Sarah Sweeney
Web Developer & Programmer
Portfolio :: http://sarah.designshift.com
Blog, etc :: http://hardedge.ca

More information about the thelist mailing list