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

Html Problem Overview

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!

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

Danny Robers script works for me in Firefox and Chrome (not sure about IE).

FWIW, the special value HyperlinkText would have been the "standard" way to do what you want, but it was dropped from CSS3 sometime in spring 2003.

It looks like Firefox is the only browser that started implementing it, because the following works for Firefox:

a:visited { color: -moz-hyperlinktext; }

Solution 3 - Html

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>

Solution 4 - Html

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

Solution 5 - Html

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.

Solution 6 - Html

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

Solution 7 - Html

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

Solution 8 - Html

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

Solution 9 - Html

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

Solution 10 - Html

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

Content Type	Original Author	Original Content on Stackoverflow
Question	anon355079	View Question on Stackoverflow
Solution 1 - Html	Fintan	View Answer on Stackoverflow
Solution 2 - Html	Dean Brettle	View Answer on Stackoverflow
Solution 3 - Html	Danny Roberts	View Answer on Stackoverflow
Solution 4 - Html	Marcus Whybrow	View Answer on Stackoverflow
Solution 5 - Html	easement	View Answer on Stackoverflow
Solution 6 - Html	ChaseMoskal	View Answer on Stackoverflow
Solution 7 - Html	ChaseMoskal	View Answer on Stackoverflow
Solution 8 - Html	kernowcode	View Answer on Stackoverflow
Solution 9 - Html	Zahid Khan	View Answer on Stackoverflow
Solution 10 - Html	john northern	View Answer on Stackoverflow