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?