2

I'm looking to style a:visited links in an article list. Currently this works fine with applying a color in my CSS to a:visited links, however, I am after something a little more. I'd like to add a small dot next to the article title when visited.

I've done some research and looks like anything other than applying a color to a:visited links don't work (background/background-images support has been removed due to privacy issues??) so I'm wondering if anyone has any tips or ideas? jQuery?

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
John the Painter
  • 2,495
  • 8
  • 59
  • 101

5 Answers5

2

In the case you want to style via script and not plain CSS jQuery doesn't support pseudo class selectors like :visited. You have to use plain javascript instead

$(document).ready(function()
{
  $("#StyleAnchors").click(function()
  {
      //works
      $("a").css("background-color", 'yellow');
      //doesn't works
      $("a:visited").css("background-color", 'red');

  //works
  document.styleSheets[0].addRule('a:visited', 'color: green');
  //document.styleSheets[0].insertRule('a:visited{background-color: #00f;}');
  });
});

http://jsfiddle.net/prJUt/

David Diez
  • 1,165
  • 1
  • 11
  • 23
1

This works, I know that for a fact since I've tried it. Though it doesnt seem to work in Chrome, it works in IE, so it's not a problem with the CSS.

<style>
a:link
{
    color: #f00;
}
a:visited
{
    color: #0f0;
}
a:hover
{ 
    color: #00f;
}
a:active
{
    color: #ff0;
}
</style>
<a href="x" target="_blank">X</a>

So try this in IE:

a:visited:before
{
     content: ".";
}

If this isnt sufficient, you'll have to add some sort of click event to your links and style them from there, for example (uses jQuery, ugly as hell though):

<a href="javascript:void(0)" onclick="$(this).html('.Link');">Link</a>
netdigger
  • 3,659
  • 3
  • 26
  • 49
0

you can place a <span> element after your <a> element. hide this element. and make a css selector like this a:visited+span... something like this. for more information about css selectors visit http://www.w3schools.com/cssref/css_selectors.asp with jquery u have even more options with selectors e.g. parent.. but you'll find these things in the web im sure.

JuHwon
  • 2,033
  • 2
  • 34
  • 54
0

Hi you can image for the visited links. For example, 

a:visited {
     padding-left: 14px;
     background: url(images/checkmark.gif) left no-repeat;
}
jeeva
  • 1,573
  • 2
  • 15
  • 24
  • A few years ago you could... not now :( – John the Painter Jan 16 '13 at 11:58
  • @rdck May be.. But the selectors :before :after selectors not supported in ie6 (internet explorer 6 does not support non-anchor pseudo classes) . But this way ll work in ie6 too!! :) – jeeva Jan 16 '13 at 12:03
0

First, the reason you should change your approach to notifying users that a link has already been visited: https://stackoverflow.com/a/10320628/2943403

Because the greater browser industry has taken specific steps to combat security holes by limiting the ways that visited links are modified/styled, if you roll your own javascript implementation it may serve to raise user suspicions of dodginess on your page/site.

Additionally, so long as your "unvisited" text color isn't grey, I think styling visited links as grey should be rather intuitive. For this reason, I would urge you (and future SO readers) to apply this simple pure-css solution and abandon any ideas to style differently.

a{color:red;}

a:visited{color:grey;}
<a href="#">run snippet & click link to see effect</a>
Community
  • 1
  • 1
mickmackusa
  • 43,625
  • 12
  • 83
  • 136
  • @JohnthePainter I hope my answer appeals to your sensibilities. If you feel this is the best answer, please award it the green tick so future SO readers don't have to read every answer on the page to find the most reasonable answer. – mickmackusa Apr 02 '17 at 01:08