What happens if multiple classes of the same element define a :before pseudo-element? [duplicate]

Question

This question already has an answer here:

• Can I have multiple :before pseudo-elements for the same element? 2 answers

I'm using :before to tag links to user profiles with a symbol to characterise the user, examples include "administrator", "inactive user", "newbie" and so on.

The thing is, it's possible for more than one to apply.

So what happens if more than one class on the link define a :before pseudo-element with content? Does the most specific selector override the first? Or do they both appear in order? Whatever happens, is it reliable behaviour?

Answer 1

The most specific selector takes precedence. This is mentioned in CSS2.1:

Pseudo-elements behave just like real elements in CSS with the exceptions described below and elsewhere.

In terms of actual browser behavior, as far as I know, this behavior is reliable on all browsers that support :before and :after on non-replaced elements like a, for which CSS2.1 does define behavior for those pseudo-elements, unlike replaced elements like img. This makes sense, because if more than one such pseudo-element were to be generated, the browser wouldn't know how it should lay them out in the formatting structure.

In the following example, by specificity and the cascade, a.inactive:before will take precedence and the :before pseudo-element for this link will have the matching content (since both selectors are equally specific — having a type selector, a class selector and a pseudo-element):

a.administrator:before {
    content: '[Administrator] ';
}

a.inactive:before {
    content: '[Inactive User] ';
}

<a class="administrator inactive" href="profile.php?userid=123">Username</a>

If an element can match more than one selector with the same pseudo-element, and you want all of them to apply somehow, you will need to create additional CSS rules with combined selectors so that you can specify exactly what the browser should do in those cases. Extending the above example:

a.administrator:before {
    content: '[Administrator] ';
}

a.inactive:before {
    content: '[Inactive User] ';
}

a.administrator.inactive:before {
    content: '[Administrator] [Inactive User] ';
}

<a class="administrator inactive" href="profile.php?userid=123">Username</a>