Two CSS rules for ::selection text color - Why can't they be selected at the same time?

Question

The code to change the ::selection text color works fine if written in the following way:

HTML:

<p>This is a paragraph.</p>

CSS:

p::selection { // This works
  color:#ff0000;
}

p::-moz-selection { // This works
  color:#ff0000;
}

But, if I place the two CSS rules on the same line like below, it does not work:

HTML:

<p>This is a paragraph.</p> 

CSS:

p::selection, p::-moz-selection { // // This does not work
  color:#ff0000;
}

Why is this not working? What is the rule to write two different CSS rules in the same line?

Answer 1

"What is the rule to write two different CSS rules in the same line?"

Usually, multiple selection like you attempted above (with the comma seperator) is fine, e.g.

div, p { 
  background-color:red;     
}

---

"Why is this not working?"

In ::selection's case however, things are a little bit different.

Take a look at the following quote from Mozilla as to the reasoning behind why this isn't working as we'd usually expect it to:

"Due to the fact that the CSS parsing rules require dropping the whole rule when encountering an invalid pseudo-element, two separate rules must be written: ::-moz-selection, ::selection {...}. The rule would be dropped on non-Gecko browsers as ::-moz-selection is invalid on them."