styling visited links belonging to a class

Question

I cannot find a way to style a:visited but only those belonging to .extern.

a:visited.extern doesn't work and neither does a.extern:visited (I' using Mozilla Firefox 43.0.1 for Linux x86_64)

The reason is I have a small icon I'd like to add to .extern links, and I want to change its url() when the link is visited.

<style>
    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");
    }
</style>

In the end all visited links of this type should be affected

<a class="extern" href="http://etc.etc.etc">link</a>

Answer 1

Basically what you want to do is restricted by browsers, particularly Firefox.

Per MDN - Privacy and the :visited selector

You will still be able to visually style visited links, but there are now limits on what styles you can use. Only the following properties can be applied to visited links:

• color
• background-color
• border-color (and its sub-properties)
• outline-color
• The color parts of the fill and stroke properties

Answer 2

First, I assume the name of your class is extern, and not .extern, so your a tag will look something like this.

<a class="extern" href="http://etc.etc.etc">link</a>

To style only the visited links which have the extern class you should use:

a.extern:visited {
    background-image:url("img/link-visited.png");
}

Notice how the :visited selector is added at the end: a.extern:visited.

Answer 3

Change

<a class=".extern" href="http://etc.etc.etc">link</a>

to

<a class="extern" href="http://etc.etc.etc">link</a>

and

<style>
    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");
    }
</style>

block with code below do not needed

a:visited:extern {
    background-image:url("img/link-visited.png");
}