Question

I recently realized, when styling HTML5 input placeholder text, that this does not work:

:-moz-placeholder, ::-webkit-input-placeholder {
  color:rgb(150,150,150);
}

But this does:

:-moz-placeholder {
  color:rgb(150,150,150);
}
::-webkit-input-placeholder {
  color:rgb(150,150,150);
}

Does anyone know why this is the case?

Answer 1

One of the :-vendor-... selector is not recognised, thus invalid. Rules containing invalid pseudo-selectors are ignored.

Have a look at this fiddle: http://jsfiddle.net/ue44U/2/
The #foo selector should match the element at the example, but since I’ve added :a-cow-says-moo to the selector set, the whole rule is ignored.