Problem when styling a placeholder based on a class in CSS

I'm trying to make sure I can have several types of placeholder based on a defined class 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 that way it does not work, I can not understand why I can not style numerous elements next to CSS when it comes to placeholder ... does anyone have a light?

EDIT

I realized that if I declare each separate selector it works, but it is not "pretty" to see when you are 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;
    }