CODEWITHSUNDEEP
htmlcssanchor
popcoder
popcoder

Reputation: 3070

Disable color change of anchor tag when visited

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?

Upvotes: 137

Views: 288795

Answers (11)

Andrew Marshall
Andrew Marshall

Reputation: 97024

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.

Upvotes: 12

Nour SIDAOUI
Nour SIDAOUI

Reputation: 372

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>

Upvotes: 0

Андрей Лебедев
Андрей Лебедев

Reputation: 451

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.

Upvotes: 1

&#198;t&#233;rnal
&#198;t&#233;rnal

Reputation: 29

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.

Upvotes: 0

Smagin Alexey
Smagin Alexey

Reputation: 345

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

Upvotes: 0

Moliere
Moliere

Reputation: 109

Use:

a:visited {
    text-decoration: none;
}

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

Upvotes: -9

Rich Bradshaw
Rich Bradshaw

Reputation: 73055

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   */

Upvotes: 130

Rob Lokhorst
Rob Lokhorst

Reputation: 169

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

Upvotes: 15

VooDoo
VooDoo

Reputation: 21

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

Upvotes: 0

Ryan
Ryan

Reputation: 7951

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.

Upvotes: 287

Kyle
Kyle

Reputation: 67244

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

Upvotes: -1

Related Questions