130

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?

11 Answers 11

274

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.

3
  • This worked great, thanks! As a note to others, you may have to add !important to the color tag for it to properly take depending on what else is in your website: color: inherit !important;
    – Mmm
    Oct 13, 2015 at 4:41
  • 4
    In Chrome this simply renders the link text in black.
    – RajV
    Feb 27, 2016 at 22:05
  • 5
    Is there any way to have a:link be the default link color (usually blue) and have a:visited inherit from that, without hard-coding "blue" anywhere?
    – rustyx
    Nov 27, 2016 at 12:20
127

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   */
6
  • 5
    To be really anal about it, shouldn't the a be a:link?
    – nikc.org
    Sep 3, 2011 at 8:25
  • 1
    I guess so, though I rarely do that. Sep 3, 2011 at 10:55
  • 4
    @nikc.org not anal at all, a:link and a are not the same. An anchor does not necessarily have to be a link. It normally changes color only when it contains a link.
    – rustyx
    Nov 27, 2016 at 12:30
  • 1
    or better yet css a, a:visited, a:hover, a:active { color:#00FF00; } Jan 22, 2021 at 18:54
  • 1
    You only care about a:link if you have anchors that do not have href, which can happen if a lot of content are auto-generated. If you care about styling a link vs a non-link, then you use a:link, otherwise it doesn't matter.
    – Nelson
    May 6, 2021 at 4:23
15

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; }
1
  • 2
    Am I looking at this wrong or are you doing the exact opposite of what's said in the quote? According to W3Schools it's 1) a:link, a:visited 2) a:hover 3) a:active
    – Max Truxa
    Sep 26, 2016 at 15:35
9

It’s possible to use the LinkText system color value from the CSS 4 Color Module to obtain the browser default value if one wishes to defer to that.

a:visited { color: LinkText; }
<a href="https://stackoverflow.com">link</a>

However note:

These values may also be used in other contexts, but are not widely supported by browsers.

It at least appears to work in Firefox 98 and Chromium 99.

1

If you use some pre-processor like SASS, you can use @extend feature:

a:visited {
  @extend a;
}

As a result you will see automatically-added a:visited selector for every style with a selector, so be carefully with it, because your style-table may be increase in size very much.

As a compromise you can add @extend only in those block wich you really need.

-1

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

1
  • OP says without doing any explicit color changes
    – Jon
    Feb 15, 2021 at 13:23
-1

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;}
0
-1

I think if I set a color for a:visited it is not good: you must know the default color of tag a and every time synchronize it with a:visited.

I don't want know about the default color (it can be set in common.css of your application, or you can using outside styles).

I think it's nice solution:

HTML:

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS:

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}
1
  • Who set me minus, can you write why you did it? Of course you can use your colors of A tag. But i written if you are using default brower's colors Jun 30, 2019 at 21:44
-1

For those who are dynamically applying classes (i.e. active): Simply add a "div" tag inside the "a" tag with an href attribute:

<a href='your-link'>
  <div>
    <span>your link name</span>
  </div>
</a>
-2
a {
    color: orange !important;
}

!important has the effect that the property in question cannot be overridden unless another !important is used. It is generally considered bad practice to use !important unless absolutely necessary; however, I can't think of any other way of ‘disabling’ :visited using CSS only.

-10

Use:

a:visited {
    text-decoration: none;
}

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

1
  • 4
    The question asked about color, not text-decoration. Jan 6, 2016 at 14:35

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.