With CSS, how do you unhighlight a link after clicking a different link?

Question

For example, on a navigation bar, you only want one link to be hightlighted, the one that the user had most recently clicked. If a user clicks a different link, then the previously highlighted link goes back to normal. How do you do with with CSS?

Answer 1

Hi Nikita,

To my knowledge, what you're asking isn't possible to achieve by using only CSS. While there are CSS pseudo-classes for certain link states (such as "a:hover"), there is no CSS selector (at least not in CSS 2.0; maybe 3.0 added something?) that will apply a style on the "current" URL.

To achieve that, you have to combine CSS along with some dynamic means for generating content (such as PHP, CGI, or my favorite - Python). A good guide for doing this in PHP can be found here; you can deduce the general concept from that article and apply it to any content-generation you feel like:

http://www.alistapart.com/articles/keepingcurrent/

Isaac