a: visited img { display: none; }

Question

My HTML code looks like this: ```

Posttitle

``` 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?

Accepted Answer

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.

a: visited img { display: none; }

Solution

Problem

Related problems