Here is my site: http://dosrevival.com

I can't seem to get the links to stop turning purple after being clicked in Chrome and IE (works in some Firefox versions?!?). In my CSS file I'm changing the a:link and a:hover 'color' to white and the 'text-decoration' to none or underlined as necessary. What's making Chrome throw this back up? Thanks!

  • HTML/CSS questions are a better fit on Doctype
    – John Conde
    Jan 27 '11 at 16:11

Check out this link

Basically you need something along these lines

a:link              { color:red; }
a:visited           { color:green; }
a:hover             { color:blue; }
a:active            { color:orange; }

Notice that I didn't put purple in there. You can see each color in the life cycle of the click process.


It is VERY important that you put them in the proper order. Link, Visited, Hover, Active

  • 3
    I've looked at the CSS and the link specification is in fact in the wrong order. The way that I learned to remember it was with LoVe HAte. Link, Visited, Hover, Active.
    – bogeymin
    Jan 27 '11 at 12:37
  • 1
    The link in the comment of the Adobe blog has the best explanation IMO: meyerweb.com/eric/css/link-specificity.html Jan 27 '11 at 13:11

Be sure to check the specifity. Sometimes you might have set a:visited for whole Body, or just a general redefine, so it has more weight. I often just use a parent id (IDs have more weight than classes) like #container whateverClasss a:visited {color:#000;} . Adding a !important; might also work, but imo is worse. Keeping an order in general is best.

  • 3
    Yes, you should just use order. Use !important only as a measure of last resort since it can seriously inhibit the maintainability and comprehensibility of your CSS. Using it out of laziness or to avoid proper debugging/planning is a bad habit. Jan 27 '11 at 13:30