Why I cant do multiple placeholder selector in LESS [duplicate]

Question

Just want to add css prefix like ::-moz-placeholder and ::-webkit-input-placeholder

So I will do multiple selector in LESS :

::-moz-placeholder, ::-webkit-input-placeholder {
 color:red;
}

It doesn't work ? Why?

Demo : http://jsfiddle.net/pfg3Q/

---

But Its work when i do normally like :

::-moz-placeholder {
 color:red;
}
::-webkit-input-placeholder {
 color:red;
}

Demo: http://jsfiddle.net/pfg3Q/1/

---

What I did wrong ? Wonder this is about LESS or not?

Ref: Prefix came from http://davidwalsh.name/html5-placeholder-css

Answer 1

Someone found the related issue already on SO: Should I use single or double colon notation for pseudo-element css

Basically, if any selector in your comma separated list is not recognized by your browser, it skips the whole rule and goes on to the next.

// Chrome
::-moz-placeholder // <-- I don't know this one, skipping!

// Firefox
::-moz-placeholder, ::webkit-input-placeholder // <-- I don't know this one, skipping!

But if you seperate them in single statements, it won't skip the one it knows.

So, as a rule of thumb: if you have vendor-prefixes, always split them up into seperate rules.