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!

Solution 1:

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:

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:

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>

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

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts