Set visited link color to whatever the color of un-visited link is (P.S. not the usual question)

Question

I need to set the a:visited CSS to whatever color the normal a is set to.

What I want to be able to tell the browser is, for the visited links, use the same color as the unvisited links, whatever color it is.

I need to do this without specifying a particular color.

Like, if some weird browser comes along that uses "green" as the color for normal unvisited links, this CSS should instruct the browser to use that same green for visited links. Exactly what color is used by the browser should be transparent to my code.. hence the phrase "whatever color".

P.S. I know how to set a:visited and a to a particular color. That is not what I am asking.

P.P.S. I am willing to use JavaScript if I have to. But I am really hellbent on making the browser do this.

Why would I want to do something like that you ask?

The blue color that IE8 uses for links is kind of cool. It is not #0000FF. It is a nice shade of blue. So I want to set it for both visited and unvisited links. But I shouldnt take a screenshot or use some add-on to pick the exact hex value each time. If IE later changes the color to some other awesome shade, this code should just work. I don't want to again find the hex and change it all over my code.

This is just one reason. Don't give me the hex for that blue. Finding that out is easy but that wouldn't be the answer!

Why would you break one of the navigational tools of the browser!? — Zoidberg, Dec 18 '09 at 17:33
This is one of the things I've been wanting to do for some time now, but it really got my attention this time when I am designing a new website. I just thought - could such a simple thing be impossible?! — , Dec 18 '09 at 17:36
Not impossible... if it is for looks, could you find a visited color that is pleasing to the eye and compliments the color scheme? — Zoidberg, Dec 18 '09 at 17:38
In the practical world, I could just use a color that suits the theme of the site and get along with it. But I just want to know whether I can tell the browser to do something like that. Please check edits to my question. I added an example. — , Dec 18 '09 at 17:41
Not sure if its possible, but if it is, it will be a neat trick to know! — Zoidberg, Dec 18 '09 at 17:45
Hi, I did not touch CSS since about 2 years, so I'm probably wrong, but maybe try a:visited{color: inherit;}, but I'm not sure if this will take color from a or from body. P.S. IE8 default blue color link for me is #0066cc — Mike, Dec 18 '09 at 20:15
I too need to do something like this where I need to set a visited link color to the color of the not visited link. This is because I am performing an image diff form of regression testing where I compare two browser content screengrabs, comparing the before and after. A time saving testing technique I would recommend (see pdiff). — Jay Byford-Rew, Jan 03 '17 at 09:05

score 8 · Answer 1 · answered May 04 '11 at 22:52

8

a:link{color:inherit}
a:active{color:inherit}
a:visited{color:inherit}
a:hover{color:inherit}

Hell yes.

I needed this because some text links (as opposed to image links) were a major part of my project's main menu, so I want them MY colours, not browser colours!

Each link was enclosed in a p tag group whose class had a particular colour (MY colour) set in CSS.

answered May 04 '11 at 22:52

Fintan

277
2
5

29

Inherit means: "get the color of the link from the parent element", thus for most people your suggestion will make the link color to be black. It will not work for links in the page body, so I would say it's not a good answer, and even I would say that it's not what the question was about. – Arsen7 Jun 04 '12 at 12:17
6

-1, does not answer the question. as mentioned by Arsen7 above, the links inherit the black color from the parent element. – Shankar Jul 12 '12 at 19:45

Dean Brettle · Answer 2 · 2023-06-13T17:14:57.047

4

The latest standard way to handle this is to use the CSS4 system color LinkText, as pointed out by @EricLaw in a comment on my original answer. This appears to be widely supported but if it isn't supported on a browser of interest, you might try Danny Robers script.

edited Jun 13 '23 at 17:14

answered Jul 18 '10 at 10:10

Dean Brettle

737
4
10

This arrived in CSS4 as "LinkText" https://www.w3.org/TR/css-color-4/ which shipped in Chrome 111 https://chromestatus.com/feature/5147752829288448 – EricLaw Jun 03 '23 at 00:48

score 3 · Answer 3 · answered Jan 07 '10 at 04:43

3

I don't think there's a pure CSS solution. Usually you would pick a color, and set both a:link and a:visited that same color.

I tried {color: inherit} but that was useless.

This jQuery solution works great though.

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
            type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                var normalColor = $('a:link').css('color');
                $('a:visited').css('color', normalColor);
            });
        </script>
    </head>
    <body>
        <a href="http://www.google.com">Google</a>
        <a href="nowhereyouvebeen">No where you've been</a>
    </body>
</html>

answered Jan 07 '10 at 04:43

Danny Roberts

3,442
23
28

I tried it. But it is not working. I still see the visited link in purple color. I just used the code you have posted and checked to make sure jQuery is included and the function is called properly. I even alerted `normalColor` and it had the correct value. But the last line doesn't seem to have any effect. Am I missing something? – Jun 22 '10 at 07:15
Probably the best solution - I was quite surprised to discover the link colours are not part of the CSS2 system colour palette: http://www.codehouse.com/webmaster_tools/system_color_palette/ - but they're being deprecated in CSS3 anyway – HorusKol Jun 22 '10 at 07:26
I don't think this will work, because jQuery can't apply pseudo-classes like that. It returns the correct 'normal' color, but interestingly as well, `$('a:visited')` seems to return the un-visited color too. Setting it is a different story, though I think this could be accomplished with some mad science of directly writing a new CSS stylesheet from JavaScript to apply the rule to the pseudoclass. – ChaseMoskal Oct 05 '13 at 16:29
@anon355079: I've taken @DannyRoberts idea and changed the way `a:visited` is set in a separate-but-related answer. – ChaseMoskal Oct 05 '13 at 17:03

score 3 · Answer 4 · answered Nov 17 '10 at 13:06

There is no way to do this using CSS. The browser indicates that a link has been visited based upon a database entry only it knows about, and then uses default colours specified in the specific browsers configuration.

CSS physically just cannot obtain the colour of something on the page. That is just the way it is. The only way is to use javascript like Danny Roberts' answer.

The reason I think that his answer is not working correctly is that $('a:visited') just selects all the visited links at that point in time and then the colour is changed for them.

What you need to do is watch for click events and re run the code each time:

var normalColor = $('a:link').css('color');
$('a').click(function() {
    $('a:visited').css('color', normalColor);
});

Close -- but not quite. In JavaScript, we can actually write the proper pseudoclass'd rules directly to the stylesheets. — ChaseMoskal, Oct 05 '13 at 17:05

score 1 · Answer 5 · answered Dec 18 '09 at 17:43

1

I don't think there is a pure CSS way of achieving this. I think you would need to use JavaScript to get the color of the a and then set a:visited to that color and this probably wouldn't work in all browsers unless there was an a{color:#dea} specified.

answered Dec 18 '09 at 17:43

easement

6,119
3
29
36

exactly. I tried getting the built-in color for a. I only got empty string. Because as you rightly pointed out, it should be set. I am okay with using JavaScript if I have to. But this particular way you are talking about is not working. – Dec 18 '09 at 17:45
1

You will only get the color from the element's style attribute if it actually has a style attribute set. This is similar to width and height properties, you can't get those unless they are set. However, dom objects also have scrollHeight and scrollWidth as well as clientHeight and clientWidth, but I doubt there is a clientColor... or scrollColor, that would make no sense... – Zoidberg Dec 18 '09 at 17:47

ChaseMoskal · Answer 6 · 2013-10-05T17:07:29.100

0

Nevermind this. See my other answer for something more specifically relevant to the asker's question.

I do this:

a, a:visited { color:#4CA1F6; }
a:hover      { color:#4CB6E1; } a:active  { color:#0055AA; }

Now that this thread has me thinking though, and I've made the following improvements to my method:

a:link, a:visited { color:#4CA1F6; }
a:hover, a:focus  { color:#4CB6E1; } 
a:active          { color:#0055AA; }

edited Oct 05 '13 at 17:07

answered Oct 04 '13 at 22:17

ChaseMoskal

7,151
5
37
50

This would be more valuable if you put your answer in context of the question. – crthompson Oct 04 '13 at 22:38
@paqogomez: I guess, my point is that the question the asker is asking implies they are tackling the wrong problem the wrong way to begin with. There should be no reason you can't define `a, a:visited` at the same time. – ChaseMoskal Oct 05 '13 at 16:07
1

Also, now that this thread has me thinking, I think it's good to define `a:hover, a:focus` simultaneously as well, so that keyboard access yields the same state as `:hover`. **Also**, under even further deliberation, I am starting to wonder if I should define `a:link` instead of just `a`... *probably*. – ChaseMoskal Oct 05 '13 at 16:08
3

To clarify: I understand that the asker is asking for something different -- fine by me, don't accept my answer. I do however, also understand that people much like myself will stumble onto this thread looking for the answer that I've provided, since many will have a related-but-different question in mind than the asker. – ChaseMoskal Oct 05 '13 at 16:26
1

Alright, alright. **Fine.** I'll just answer this question *for reals*. See other answer. – ChaseMoskal Oct 05 '13 at 16:41

score 0 · Answer 7 · answered Oct 05 '13 at 16:53

0

Presto:

$(function(){
  var sheet = document.styleSheets[document.styleSheets.length-1];
  sheet.insertRule(
    'a:visited { color:'+$('a:link').css('color')+'; }',
    sheet.length
   );
});

I've tested and can confirm this works in Chrome. Keep in mind however, which sheet you're adding the rules to -- make sure its media attribute applies to the media that you care about. Additionally, if you have any rules that override the a coloring, this likely won't work properly -- so make sure your stylesheets are clear of that.

I'm not so sure this is a very wise practice anyways. Personally, I always explicitly define my link colors for every site.

PS:

Apparently IE (don't know which versions) insists on their own syntax:

sheet.addRule('a:visited', $('a:link').css('color'), -1);

answered Oct 05 '13 at 16:53

ChaseMoskal

7,151
5
37
50

Just for you, @paqogomez ;) – ChaseMoskal Oct 05 '13 at 16:58
Is the $('a:link').css(;color') jquery or the stylesheet rule syntax? i.e. is jquery required as it looks like it is jquery? – Jay Byford-Rew Jan 03 '17 at 09:02
It was indeed jQuery, I'm afraid. Though looking back on this now, I wonder if setting on the `:visited` element `color: inherit;` may suffice. – ChaseMoskal Jan 10 '17 at 02:06
After my comment I have provided my own answer here. – Jay Byford-Rew Jan 10 '17 at 08:38

score 0 · Answer 8 · answered Jan 03 '17 at 11:20

I required a solution to do as the title of this question suggests "Set visited link color to whatever the color of un-visited link is". For me I needed a way to perform an image comparison of browser page content screen grabs that I use for regression testing (pdiff - perceptual diff). Here is the code that worked for me.

(function(){
  var links = document.querySelectorAll('a');
  for (var i=0; i<links.length; i++) {
    var link = links[i];
    if (link.href) { //must be visitable
      var rules = window.getMatchedCSSRules(link) || [];
      var color = '#0000EE' //most browsers default a:link color;
      for (var j=0; j<rules.length; j++) {
        var rule = rules[j];
        var selector = rule.selectorText;
        color = rule.style['color'] || color;
      }
      link.setAttribute('style','color:' + color + ' !important');
      //this was enough for me but you could add a 'a:visited' style rule to the rule set
    }
  }
})();

Zahid Khan · Answer 9 · 2017-01-19T12:05:11.453

-2

 a:link, a:visited {color: inherit;}
 a:hover, a:focus {color:inherit;}

edited Jan 19 '17 at 12:05

answered Oct 22 '13 at 04:32

Zahid Khan

1,250
3
15
31

2

The OP stated "without specifying a particular color" – brettwhiteman Mar 14 '16 at 20:16
1

For those wondering, this answer was edited after the previous comment (and probably the votes): http://stackoverflow.com/posts/19509026/revisions – waldyrious May 05 '17 at 00:09

score -2 · Answer 10 · edited May 26 '17 at 21:18

-2

a.one:link {
    color:#996600;
    background-color:transparent; 
    text-decoration:underline;  
}

a.one:hover { 
    color: red;
    background-color: transparent;
    text-decoration: underline; 
}

a.one:visited {
    color: #996600;
    background-color: transparent;
    text-decoration: underline
}

a.one:hover { 
    color: red;
    background-color: transparent;
    text-decoration: underline; 
}

edited May 26 '17 at 21:18

Nisse Engström

4,738
23
27
42

answered May 26 '17 at 20:38

john northern

1

1

Welcome to StackOverflow. Could you please explain your answer a bit? And since this is an old question, how it is different from the many other answers already posted? – avojak May 26 '17 at 21:08

Set visited link color to whatever the color of un-visited link is (P.S. not the usual question)

10 Answers10

Nevermind this. See my other answer for something more specifically relevant to the asker's question.

Linked