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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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