a: visited img { display: none; }

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?

You can't reffeer to elements like this in CSS ... he needs to be next or be a children of the a tag — DaniP, Nov 19 '13 at 14:28
JSfiddle won't be usefull, or, i don't know how to 'visit' a page from jsFiddle iframes. — Milche Patern, Nov 19 '13 at 14:28
There's nothing wrong with your CSS, but it won't work. This is a [security feature](http://stackoverflow.com/a/8331950/1679849). — r3mainer, Nov 19 '13 at 14:30
@isherwood Good question. For some odd reason my answers are being posted up here. I'm definitely not using the comment box to write them :-( — r3mainer, Nov 19 '13 at 14:34
Ah. Answers that are too short and lack code or links are sometimes moved by the system. — isherwood, Nov 19 '13 at 14:37
@squeamishossifrage please see [this](http://meta.stackexchange.com/q/98950/152859). You should see "Trivial answer converted to comment". (one time only, so don't look for it now) (oh, never mind, I see you already [reported it](http://meta.stackexchange.com/q/208033/152859) :)) — Shadow The GPT Wizard, Nov 19 '13 at 15:06

Jonathan Naguin · Accepted Answer · 2013-11-19T14:50:38.600

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.

For the JS solution, one could use local storage for storing which links have been visited. This would, of course, not be a good solution for older browsers. — ajp15243, Nov 19 '13 at 14:36

score 0 · Answer 2 · answered Nov 19 '13 at 14:58

0

beacus of :visited saved in browsers, so you can set Cookie for each <a> that clicked by javascript, and hide the <img inside.

answered Nov 19 '13 at 14:58

mehdi

1,755
2
15
21

a: visited img { display: none; }

2 Answers2

Linked