Reputation: 3070
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
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
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
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
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
Reputation: 109
Use:
a:visited {
text-decoration: none;
}
But it will only affect links that haven't been clicked on yet.
Upvotes: -9
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
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
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
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
Reputation: 67244
Either delete the selector or set it to the same color as your text appears normally.
Upvotes: -1