4

See answer for this question. I write CSS rule:

::-webkit-input-placeholder,:-moz-placeholder,::-moz-placeholder,:-ms-input-placeholder {
    color:    #999;
}

So firefox can not recognize its elements (-moz-placeholder and -moz-placeholder). Why? It is possible to write all this pseudo element in one CSS rule?

Community
  • 1
  • 1
Cherry
  • 31,309
  • 66
  • 224
  • 364
  • If you have to write lots of code like this, I recommend to use a CSS preprocessor, like [LESS](http://lesscss.org) (LESS is a kind of "superset" of CSS, so all CSS is also valid LESS, so it's easy to use). – Rob W Jul 16 '13 at 09:49
  • @RobW Unless LESS has something comparable to the `@content` directive in Sass, then LESS can't reasonably do this in an abstract way (see: http://stackoverflow.com/a/17181946/1652962). – cimmanon Jul 16 '13 at 11:24

2 Answers2

5

Short answer: no. This behaviour is accordance with the W3C spec (see 4.1). That is if any selector list contains one or more selectors that are invalid, the entire selector list is considered invalid, hence you cannot group browser-specific selectors.

Warning: the equivalence is true in this example because all the selectors are valid selectors. If just one of these selectors were invalid, the entire selector list would be invalid. This would invalidate the rule for all three heading elements, whereas in the former case only one of the three individual heading rules would be invalidated.

mqchen
  • 4,195
  • 1
  • 22
  • 21
1

According to Firefox, the selector has errors; unrecognised pseudo classes. So the rule is ignored in its entirety, as per the definition.

Ditto for webkit and IE.

So the solution is to split these across multiple rules, as the answer to the other question indicates.

::-webkit-input-placeholder {
    color:    #999;
}
:-moz-placeholder,::-moz-placeholder {
    color:    #999;
}
:-ms-input-placeholder {
    color:    #999;
}

As you can see, you can put both the -moz- ones in the same rule, because Firefox recognises them both. (They also mean the same thing, so having them both in the rule is redundant, but it works, so it doesn't matter.)

Fiddle

Edit: as shown in the comments, the single-colon version of the Mozilla selectors doesn't work, only the double colon version does. (in the latest version that is, don't have older versions here). But the single-colon version is not considered an error, otherwise this CSS wouldn't have worked.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • 1
    Your last paragraph is incorrect - the pseudo-class was switched for a pseudo-element in a recent version of Firefox, so not all versions will support both at the same time. In fact, I don't think any version supports both. So you'll have to split that rule as well, unfortunately. – BoltClock Jul 16 '13 at 09:52
  • The answer to the question in the title is yes. You can put several pseudo elements in one rule. the fact that it doess't work here is because some of the selectors are unrecognisable, not because they are pseudo-elements! – Mr Lister Jul 16 '13 at 09:52
  • @BoltClock That's odd. While my fiddle works as written, it's true that the "pseudo-class" syntax doesn't work. In other words, Firefox recognises `:-moz-placeholder` as not an error, but it doesn't do anything with it. Only the new `::` syntax. Oh well. – Mr Lister Jul 16 '13 at 09:57
  • 1
    Hmm, so it just silently ignores `:` while continuing to apply `::` in the same rule. That's interesting. I'm not sure if the same can be said for old versions that used `:` before the change, however. – BoltClock Jul 16 '13 at 10:00