6

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • 2
    Empirically, the most-specific overrides the *less* specific; but I've got no specs to-hand with which I could confirm that as the *correct* behaviour; but that would seem to tie in with the general specificity rules of CSS, I guess. – David Thomas Jan 01 '13 at 15:41
  • Turns out this question is a duplicate of another one I answered several months before. My excuse for not remembering it? [It was originally a one-liner (two-sentencer?).](http://stackoverflow.com/revisions/11999197/1) I have since merged most of the information in this answer into the earlier one. – BoltClock Mar 05 '15 at 15:39

1 Answers1

5

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>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356