2

I am trying to add an icon to all unvisited links on a particular Wordpress category page.

Here is the CSS code I'm using. I have put it at the bottom of my last CSS file.

.category-xyzzy .entry-title a:link {
background-image: url("/new-star.png");
background-repeat: no-repeat;
color: pink;
}

.category-xyzzy .entry-title a:visited {
background: none;
}

The weird thing is that the background image is being added to all links (visited or unvisited) but the pink colour is only being applied to the unvisited links.

This is happening in multiple browsers.

The fact that only the unvisited links are being coloured pink would seem to indicate that my first selector is working properly, but I can't understand why the background image, which appears in the same CSS rule and nowhere else is being applied to all links.

In fact I only added the second rule which matches against a:visited as an attempt to force the issue. The problem occurs whether the second rule is specified or not.

slugster
  • 49,403
  • 14
  • 95
  • 145
Patrick
  • 23
  • 2

2 Answers2

3

Are you viewing in Chrome? You will probably find that it DOES work in FF. But that will stop soon probably. More here: Google chrome a:visited background image not working

Community
  • 1
  • 1
stephenmurdoch
  • 34,024
  • 29
  • 114
  • 189
  • It looks like this 'error' is a deliberate departure from the CSS spec to prevent people from detecting which sites you visit. I don't really know why they didn't continue to allow it for links to the same domain that served the current page but maybe there is some reason that is too difficult. – Patrick May 15 '11 at 23:19
0

You could add important to your unvisited link. 

.category-xyzzy .entry-title a:visited {
background: none !important;
}
breezy
  • 1,910
  • 1
  • 18
  • 35