CSS: Don't target multiple vendor-prefixed pseudo-elements in a single rule

Some pseudo-elements Archive need to be addressed with vendor prefixes. E.g. ::selection Archive 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:

Copy
::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:

Copy
::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:

Copy
=selection
  ::-moz-selection
    @content
  ::selection
    @content

Then use it like this in your .sass file:

Copy
+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).

Check out our new e-book:

Growing Rails Applications in Practice

Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Learn more