a: visited img { display: none; } [duplicate]

Question

My HTML code looks like this:

<article class="post">
  <a class="thumbnail" href="#">
    <img width="200" height="100" src="some.jpg" class="attachment-thumbnail">
  </a>
  <header>
    <h2 class="posttitle">
      <a href="#">Posttitle</a>
    </h2>
  </header>
</article>

The image inside the first link only need to be displayed, when the link isn't visited yet. If the link is visited, I'll do a display: none;

a:visited img {
  display: none !important;
  visibility: hidden !important;
  border: 1px solid red; * this is for testing*
}

http://jsfiddle.net/isherwood/rj394/2

But the image is still displayed. The testing-border is red. If I change :visited to :hover it does the display as it should (:hover and it's gone). Firebus tells me, that the image is 'display: none' but apparently it isn't...

Does someone know this problem and knows a possible solution?

Answer 1

According with the documentation from Mozilla:

For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used.

Though the color can be changed, the method getComputedStyle will lie and always give back the value of the non-visited color.

So, you can't change the display value. You can see here as how is working with a different propery as border-color.

You will have to use another approach as JavaScript + LocalStorage (mostly supported).

A roughly solution could be, using jQuery:

$("a").on('click', function(){
    var $this = $(this);
    localStorage.setItem($this.attr('href'), true);
    $this.addClass('visited');
});

$( document ).ready(function() {
    $("a").each(function(index, elem){
        var item = $(elem);
        if (localStorage.getItem(item.attr('href'))){
            item.addClass('visited');
        }
    });
});

A demo here.