title: styling visited links belonging to a class
body: <p>I cannot find a way to style <code>a:visited</code> but only those belonging to <code>.extern</code>.</p>
  
  <p><code>a:visited.extern</code> doesn't work and neither does <code>a.extern:visited</code> (I' using Mozilla Firefox 43.0.1 for Linux x86_64)</p>
  
  <p>The reason is I have a small icon I'd like to add to <code>.extern</code> links, and I want to change its <code>url()</code> when the link is visited.</p>
  
  <pre><code>&lt;style&gt;
      a.extern {
          padding-right:1.3em;
          background-repeat: no-repeat;
          background-attachment: scroll;
          background-position: right center;
          background-clip: border-box;
          background-origin: padding-box;
          background-size: 0.7em 0.7em;
          background-image: url("img/link.png");
      }
  
      a:visited:extern {
          background-image:url("img/link-visited.png");
      }
  
      a.extern:visited {
          background-image:url("img/link-visited.png");
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>In the end all <strong>visited</strong> links of this type should be affected</p>
  
  <pre><code>&lt;a class="extern" href="http://etc.etc.etc"&gt;link&lt;/a&gt;
  </code></pre>