Take the 2-minute tour ×

I have to disable color change of anchor tag when visited. I did this:

a:visited{ color: gray }

(The link is gray in color before visited). But this is a way where I explicitly state the color after the link is visited, which is again a color change.

How can i disable color change of anchor tag when visited without doing any explicit color changes?

share|improve this question

4 Answers 4

up vote 25 down vote accepted

You can't, you can only style the visited state.

For other people find this, make sure that you have them in the right order:

a {color:#FF0000;}      /* unvisited link */
share|improve this answer
To be really anal about it, shouldn't the a be a:link? –  nikc.org Sep 3 '11 at 8:25
I guess so, though I rarely do that. –  Rich Bradshaw Sep 3 '11 at 10:55
One could be really _nal regarding the use of such slang expression here. @nikc.org lol i wonder where these crazy expressions come from :D –  Mzn Aug 21 at 14:16
It's not slang: en.m.wikipedia.org/wiki/Anal_retentiveness –  Rich Bradshaw Aug 21 at 14:37

If you just want the anchor color to stay the same as the anchor's parent element you can leverage inherit:

a, a:visited, a:hover, a:active {
  color: inherit;

Notice there is no need to repeat the rule for each selector; just use a comma separated list of selectors (order matters for anchor pseudo elements). Also, you can apply the pseudo selectors to a class if you want to selectively disable the special anchor colors:

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;

Your question only asks about the visited state, but I assumed you meant all of the states. You can remove the other selectors if you want to allow color changes on all but visited.

share|improve this answer
this is the best answer to the question –  sQuijeW Dec 28 '13 at 16:58
This helped me out a lot, thanks Ryan! –  Steve Bauman Apr 28 at 16:16

According to w3schools.com:


So if you want to disable the color change, a:visited must come after a:hover. Like this:

a { color: gray; }
a:hover { color: red; }
a:visited { color: gray; }
share|improve this answer

Either delete the selector or set it to the same color as your text appears normally.

share|improve this answer

Your Answer


