Disable color change of anchor tag when visited

Question

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?

Answer 1

a:visited {
    text-decoration: none;
}

but it will only affect links that haven't been clicked on yet.

Answer 2

For :hover to override :visited, and to make sure :visited is the same as the initial color, :hover must come after :visited.

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

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

To disable :visited change you would style it with non-pseudo class:

a, a:visited { color: gray; }
a:hover { color: red; }

Answer 3

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.

Answer 4

You can solve this issue by calling a:link and a:visited selectors together. And follow it with a:hover selector.

a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}

Answer 5

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 */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

Answer 6

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