CODEWITHSUNDEEP
htmlcssanchorvisited
anon355079
anon355079

Reputation:

Set visited link color to whatever the color of un-visited link is (P.S. not the usual 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!

Upvotes: 70

Views: 61633

Answers (10)

Dean Brettle
Dean Brettle

Reputation: 757

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.

Upvotes: 4

john northern
john northern

Reputation: 1

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

Upvotes: -2

Zahid Khan
Zahid Khan

Reputation: 1260

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

Upvotes: -2

Jay Byford-Rew
Jay Byford-Rew

Reputation: 6014

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

Upvotes: 0

ChaseMoskal
ChaseMoskal

Reputation: 7651

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

Upvotes: 0

ChaseMoskal
ChaseMoskal

Reputation: 7651

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

Upvotes: 0

Fintan
Fintan

Reputation: 277

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.

Upvotes: 8

Marcus Whybrow
Marcus Whybrow

Reputation: 19988

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

Upvotes: 3

Danny Roberts
Danny Roberts

Reputation: 3572

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>

Upvotes: 3

easement
easement

Reputation: 6139

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.

Upvotes: 1

Related Questions