Unsetting a background value for a:visited vs a:link

Question

I've just wasted an afternoon figuring out that the a:visited selector in CSS has all attributes disabled apart from a handful that are directly related to colour (see here: http://www.impressivewebs.com/styling-visited-links/ ).

Anyway, I'm wondering if it's possible to unset an attribute set for a:link? I have an a:link selector that fills in the background with a CSS gradient, but it would be nice if this could go grey for a:visited.

According to the new implementation, you can set background-color for a:visited, but unfortunately this gets overridden by the background attribute for a:link because a:visited can't use background now.

All I'd like to do is unset background for a:visited so that background-color is used. Does anyone know if this is possible?

Answer 1

Make sure that you declare a:visited after the a. Otherwise the a will overrule it.

a {
   background: #ff0000;
}
a:visited {
   background: url( none );
}

Answer 2

use a instead of a:link for background color

see fiddle here

a{
    background: green;
}
a:visited{
    background: orange;
}

Answer 3

Give your hyperlink a display style of inline-block

a{
  display: inline-block;
  background-color: red; 
  //this becomes the default bgcolor; override it in subsequent pseudo state styles
}

This allows you to specify background colors for your hyperlinks.

You have to normally specify the styles for hyperlinks in the following order

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

In this order the visited link style overrides the normal link style. So, your css for visited will be applied after you click the link.