Why is it not possible to combine pseudo-elements / classes related to a specific provider into one set of rules?

Question

In CSS, you can stylize placeholder text inside input using a combination of pseudo-classes and vendor-specific pseudo-elements (to get better cross-browser coverage).

All of them have the same basic properties (that is: stylization of text and color declarations).

However, despite the fact that I inevitably want to apply the same styles regardless of the browser provider, it seems impossible to combine them together in a comma separated selector (as with any other CSS fragment where you want two selectors to use the same styles).

As an example, I tend to focus on placeholder style using the following four selectors:

• input:-moz-placeholder
• input::-moz-placeholder
• input:-ms-input-placeholder
• input::-webkit-input-placeholder

(although :-moz-placeholder deprecated in favor of ::-moz-placeholder , this only happened with the release of FireFox 19, so currently both are necessary for better browser support).

What is frustrating is that declaring and providing each (the same) style leads to a lot of repetition in CSS.

So, to make sure the placeholder text is right-aligned and italicized, I get:

 input:-moz-placeholder{ font-style: italic; text-align: right; } input::-moz-placeholder{ font-style: italic; text-align: right; } input:-ms-input-placeholder{ font-style: italic; text-align: right; } input::-webkit-input-placeholder{ font-style: italic; text-align: right; } 

What I really want to do is combine them into one single rule, separated by commas:

 input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input::-webkit-input-placeholder{ font-style: italic; text-align: right; } 

However, even though this has happened several times, this does not seem to work. My concern is that there is some fundamental part of CSS that I don't understand.

Can anyone shed some light on why this is happening?

Answer 1

CSS2.1 state :

The selector (see also the selector section) consists of everything up to (but not including) the first left curly bracket ({). The selector always comes with the declaration block. When the user agent cannot parse the selector (i.e., it is not valid with CSS 2.1), it must ignore the selector and the next declaration block (if any).

Note that “invalid CSS 2.1” in the case of a browser that implements CSS3 does mean “it is not understood by the user agent”.

Since one browser provider does not understand the prefixes of other providers, it must reject any rules that contain these unrecognized prefixes in pseudo-classes and pseudo-element selectors. ^one

To understand why such a rule was introduced, see this answer .

---

¹ _{Note that WebKit is notorious for partially violating this rule: it has no problems analyzing rules whose selectors have unrecognized prefix pseudo-elements (which in this case is equal to ::-moz-placeholder ). However, the pseudo-class :-moz-placeholder in your combined rule will cause it to break anyway.}

Answer 2

The specs say that if the user agent does not recognize part of the selector, it should ignore the entire selector and its block.

http://www.w3.org/TR/css3-syntax/#rule-sets

The selector (see the Selectors [SELECT] module) consists of everything up to (but not including) the first left curly bracket ({). The selector always comes with the {} block. When the user agent cannot parse the selector (i.e., it is not valid CSS3), it must also ignore the {} block.