highlight current link

[neilkw]

How do I add a class for an currently active link in css.

ie. a list of 10 links - when I view one of the pages, the corresponding link has a different colour.

People have mentioned using active and focus states but I don't think that's correct.

Show me the way people...

thanks

[jscheuer1]

Adding a class is easy. Just make up some descriptive non-reserved name for your class, for example:


.activLight {
color:white;
background-color:navy;
}

That's the easy part. Applying it to a particular link is easy too:


<a class="activLight" href="whatever.htm">Whatever</a>

If each page is separate and the activLight class is to be applied specifically on the basis of the page you are on, then there is nothing to else worry about. The only tricky part (and this can vary but, really isn't all that hard) is if you are using PHP, asp or some other sort of method that uses the same code for several pages. Then you have to come up with a method for assigning this new class only as desired.

[djr33]

John, he was talking about an active link, not just a link in general.

I believe it's a.active or a:active, but not sure.

Someone should tell you soon :)

Or, perhaps not active, but the hover state. That's when the mouse is over it. Active is after it's been clicked and the next page is loading.

[jscheuer1]

John, he was talking about an active link, not just a link in general.

That's not clear to me. If when you go to a page, you want the link of the current page to appear as though it is 'active', then what I outlined is the way to go.

The a:active pseudo class is relatively useless unless, for some reason, clicking on the link doesn't navigate away from the page before the effect can be noticed. It has been used to good effect in DD's CSS Horizontal hover menu:

http://www.dynamicdrive.com/dynamicindex1/hover.htm

to produce a 'depressed button' effect in standards compliant browsers like FF and Opera.

[dav8604]

a:visited will give you a different color if you have previously visited the page.

but i'm not sure what you are trying to achieve... Are you talking about having 10 pages with the same 10 links on each page?

[nelis]

For reference here are the link associations that I know of


A:link

A:visited

A:active

A:hover

[jscheuer1]

For reference here are the link associations that I know of


A:link

A:visited

A:active

A:hover

Very good but, those are actually pseudo classes, not associations. Further, I don't think that any of these is what the OP is looking for. For froward compatibility the a should be lower case, as should all style, unless upper case is required.