Reputation: 1146

Reset link colour to browser default

Is there a way to reset visited and unvisited link colours to the browser default after they have been changed?

In my specific situation, I have a main style file containing:

a:link    { color: black; }
a:visited { color: black; }

And I would like to have a few specific links rendered with the default colours.

EDIT: Here is a jsFiddle to play with. I would like a style for the default class that makes it match the browser default.

Upvotes: 7

Answers (11)

Michael Allan

Reputation: 3921

Nowadays we can do something like this:

    <head>
        <style>
             :link    { color: black; }
             :visited { color: black; }
             .default-color :link    { color: LinkText; }
             .default-color :visited { color: VisitedText; }
            </style></head>
    <body>
        <a href='#'>link</a>,
        <span class='default-color'>
            <a href='#'>link</a></span></body>

The second link renders with default colours.

See: CSS Color Module § System Colors

Upvotes: 1

user

Reputation: 25718

What you're looking for is revert keyword, but it's not yet implemented in most browsers, currently only Safari supports it. The links to track the development per browser are listed in the Browser compatibility section on MDN.

Some day this should work everywhere:

a { color: red; }
a.reverted { color: revert; }

<a href="#">red</a> <a class="reverted" href="#">default</a> <a href="#">red</a>

But for now think about a workaround. The feature is just not there yet.

Upvotes: 4

Itay

Reputation: 16777

Edit:

Another way is avoiding the problem from the beginning. Give the special links you want to be with the default style a special class (let's call it .default), and instead of:

a:link    { color: black; }
a:visited { color: black; }

Use the not pseudo class and write:

a:not(.default):link    { color: black; }
a:not(.default):visited { color: black; }

Notice that this pseudo class doesn't work on IE 8 and lower. For them you can use a special CSS (I don't like it, but it'll work).

Upvotes: 3

Jukka K. Korpela

Reputation: 201538

No, you cannot set any CSS property to the browser default if it has been changed (i.e., if there is any style sheet being applied that assigns a value to the property. This follows from basic principles of CSS.

So consider asking a different question. There are ways to limit the effect of CSS rules to specific elements, instead of e.g. preventing all links from looking like links.

Upvotes: 0

Matthew S

Reputation: 21

enter code herea.class{ color:inherit; }

Specifies that the color should be inherited from the parent element.

so if your body was color:blue; then followed by a.class{color:inherit} then those examples would be blue. at the same time, you could just use a.class:link{color:blue}. and another for when you visit the link.

Your best with just customizing classes of links of special interest and leaving the rest by default.

Upvotes: 0

jampafoo

Reputation: 176

If that is the only css controlling your a tags then just remove those and that will take off any styling. You could also just change the color?? Like so...

a:link {color: blue;}  
a:visited {color: purple;}

Upvotes: 2

jeremy

Reputation: 10057

I guess one question to ask here is: why? Why would you want to do that in the first place? To my knowledge, there's no W3C standard delineating what default link colors should be, anyways. A value (such as default) for color wouldn't make sense at all, seeing as that the isn't a default value.

With that being said, the most logical way to go about this would to just style things yourself. I'm not sure what situation your in, but whatever the case is, I'm pretty sure you're doing something wrong if you're asking how to restore colors to the browser default. So, before I give you a rather dry solution, I'll ask: can you give us some context? In the case that you're making something like menu bar links and you don't want the same styling for those menu bar links to leak into your normal links, you should really be using some kind of container to select those links in.

Anyways, here comes that dry solution. Most browsers use blue for links, purple for visited links, and red for active links. So, something like the following would work for browsers that go by these colors (assuming that the user hasn't modified the browsers' styling sheet, in which case you may want to learn about that or use something like initial, examined in Itay's answer).

a:link, a     { color: blue; }
a:visited     { color: purple; }
a:active      { color: red; }

Upvotes: 0

Afzaal Ahmad Zeeshan

Reputation: 15860

You can use this:
a { color: inherit; } That will inherit, and as there is no other link color so the browser will give the link its own style!

Upvotes: -1

Marc B

Reputation: 360572

You can only fiddle with the URL. Browsers record the URLs they've visited. If they're rendering a page, and a particular URL appears in that list, then url is colored as "visited".

You can't force a browser to treat a URL as visited, unless they've actually been there. But you CAN make a visited URL appear as "new" by adding something different to the url, so that it APPEARS new to the browser. e.g.

example.com/foo.php
example.com/foo.php?random=value

both point at the same script, but the browser will treat both as "different". If that random value changes each time, the the browser will effectively think each time it's a brand new url and color it as "new".

Upvotes: 0