Some
pseudo-elements
Show archive.org snapshot
need to be addressed with vendor prefixes. E.g.
::selection
Show archive.org snapshot
is not supported by Firefox, you need to use ::-moz-selection instead.
What you cannot do is to define a single CSS rule to address both the standard and vendor-prefixed form:
::selection, ::-moz-selection {
background-color: red;
}
This rule will be ignored by all browsers. The reason is that if a browser does not know all pseudo elements in a selector, it ignores the entire rule. This is because the CSS spec says so.
So you need to copy & paste the rule instead:
::selection {
background-color: red;
}
::-moz-selection {
background-color: red;
}
If you're using a CSS preprocessor like Sass, you can write a mixin that does the copying and pasting for you:
=selection
::-moz-selection
@content
::selection
@content
Then use it like this in your .sass file:
+selection
background-color: red
You will still have the rule twice in your CSS, but your .sass will be DRY (and the CSS will compress well before delivery).
