Read more

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

Henning Koch
April 25, 2017Software engineer at makandra GmbH

Some pseudo-elements Show snapshot need to be addressed with vendor prefixes. E.g. ::selection Show snapshot is not supported by Firefox, you need to use ::-moz-selection instead.

Illustration web development

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


Then use it like this in your .sass file:

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

Posted by Henning Koch to makandra dev (2017-04-25 14:40)