Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?

by

CSS2.1 states:

The selector (see also the section on selectors) consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a declaration block. When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

Note that since CSS2.1 pre-dates CSS3, “it is not valid CSS 2.1” is written under the assumptions that a user agent is fully CSS2.1-compliant and that CSS3 does not exist in theory. In practice, wherever the spec says “it is not valid CSS” or something to that effect, it should be taken to mean “it is not understood by the user agent”. See my answer to this related question for a more in-depth explanation.

Namely, since one vendor’s browser doesn’t understand other vendors’ prefixes, it has to drop any rules that contain those unrecognized prefixes in pseudo-class and pseudo-element selectors.1

For some insight as to why such a rule was put in place, see this answer.

1 Note that WebKit is notorious for partially flouting this rule: it has no trouble parsing rules whose selectors have unrecognized prefixed pseudo-elements (which in this case is ::-moz-placeholder). That said, the :-moz-placeholder pseudo-class in your combined rule will cause it to break anyway.

More Related Contents:

  1. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  2. What is the difference between a pseudo-class and a pseudo-element in CSS?
  3. css3 nth of type restricted to class [duplicate]
  4. Does CSS have a :blur selector (pseudo-class)?
  5. Can I target a :before or :after pseudo-element with a sibling combinator?
  6. What is the difference between :focus and :active?
  7. Should I use single or double colon notation for pseudo-elements?
  8. Universal selector * and pseudo elements
  9. How to select the first, second, or third element with a given class name?
  10. Can I have multiple :before pseudo-elements for the same element?
  11. Combine :after with :hover
  12. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  13. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  14. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  15. Vertically centering content of :before/:after pseudo-elements
  16. What’s the difference between CSS3’s :root pseudo class and html?
  17. Why doesn’t this CSS :not() declaration filter down?
  18. CSS 3 nth of type restricted to class [duplicate]
  19. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  20. How to show the first N elements of a block and hide the others in css?
  21. Is there an opposite CSS pseudo-class to :hover?
  22. What is the difference between pseudo-classes and pseudo-elements?
  23. Combine CSS Attribute and Pseudo-Element Selectors?
  24. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  25. Matching an empty input box using CSS
  26. SASS: randomly pick background-image from a list
  27. What does “i” mean in a CSS attribute selector?
  28. CSS Selector for nth range?
  29. CSS selector (id contains part of text)
  30. CSS – First child without certain class

Leave a Comment