There are a couple of issues at play here.
- You can't do this with pure CSS because currently their is no parent selector. As Hashem noted above, it is currently included in the working draft for CSS4.
- Questions such as this suggest that it might be possible using JavaScript, to check the colour of the link for example, and deduce from that, that the link is visited. However, I've just tried on Firefox 27, and it no longer works for me. I'd speculate that it's seen as a security issue, seeing as you could potentially exploit it to work out a user's particular internet history.
Initially I suggested looking at using the ::before
selector to try to achieve something, but after a little digging I came across this article (and this answer from SO) which might make for an interested read.
See this JSFiddle (updated to native JS) for my workings. It's worth noting I did try the native JavaScript check as mentioned in the above answer, as well as using the :visited
selector in jQuery, but neither worked.
JS
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i ++) {
var anchor = anchors[i];
console.log(document.defaultView.getComputedStyle(anchor, null).getPropertyValue('color'));
}
HTML
<p>
<a href="http://google.com">Google</a>
</p>
<p>
<a href="http://nowayjose.com">Never visited</a>
</p>
CSS
a { color: #00FF00; }
a:visited { color: #FF0000; }
The potential security implications of how the !
selector in CSS4 would play out with :visited
rules are pretty interesting, given that you could style a different element and then potentially query that element for a style.