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.

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

• We build reliable cloud solutions with Infrastructure as code
• We are experts in security, Linux and databases
• We support your dev team to perform

Read more Show archive.org snapshot

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