Problem styling a placeholder based on a CSS class

Question

I’m trying to make sure I can have several types of placeholder based on a class defined like this:

.red,
.red::-webkit-input-placeholder,
.red:-moz-placeholder,
.red::-moz-placeholder,
.red:-ms-input-placeholder{
    color:red
}

The problem is that if I define it this way it doesn’t work, I can’t understand why I can’t style numerous elements together with CSS when it comes to the placeholder... someone has a light?

EDIT

I realized that if I declare each separate selector it works, but it doesn’t get "beautiful" to see when creating the codes. So:

.red {
    color: red;
}

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

    .red:-moz-placeholder {
        color: red;
    }

    .red::-moz-placeholder {
        color: #fff !important;
    }

    .red:-ms-input-placeholder {
        color: #fff !important;
    }

Answer 1

I’m glad you were able to solve the problem on your own.

The only solution I have found to date is by using this method of declaring the rules separately.

I believe this is necessary because when the browser does not recognize a selector it ignores the whole rule. So when Webkit doesn’t recognize the firefox selector it ignores the CSS rule, and the opposite is also true.