Disable color change of anchor tag when visited

99

I have to disable the color change of an 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 the color change of an anchor tag when visited without doing any explicit color changes?

This question is tagged with html css anchor

~ Asked on 2011-09-03 07:52:22

The Best Answer is


109

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

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

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

~ Answered on 2011-09-03 07:59:47


211

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.

~ Answered on 2011-11-04 18:23:34


Most Viewed Questions: