Question

Normally we use this idea (different classes separating with comma) .Test, .test1 {} , But here it will work fine only we call classes separately.

Why this issue ?
Demo here http://jsfiddle.net/6AR8n/

/* seperate classes  */

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



/* Classes with coma */

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




<div id="red">
    <input type="text"  placeholder="Without Coma" >
</div>
<br>
 <div id="green">
    <input type="text"  placeholder="Coma" >
</div>

Answer 1

This is because browsers are supposed to drop the entire rule when encountering unrecognized selectors. From the CSS2.1 spec:

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.

This includes prefixed selectors, like :-moz-placeholder and ::-webkit-input-placeholder in your example, because a browser isn’t supposed to attempt to parse a prefix that it doesn’t support; to a certain parser, foreign prefixes are just as invalid as any other syntax error.

Also, as mentioned in the comments the #green part needs to be replicated on both selectors in your comma-separated group, like so:

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

But this is completely irrelevant to the issue at hand.