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

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.