css selectors - Proper CSS syntax for assigning style attributes to a pseudo-class for multiple classes'? -

i trying set color (font-color) attribute placholder pseudo class multiple classes of inputs.

(so want inputs class .red-va or .blue-va have placeholder text of given color)

i can (and have) done this:

.red-va::-webkit-input-placeholder {    color: white; }  .red-va:-moz-placeholder { /* firefox 18- */    color: white; }  .red-va::-moz-placeholder {  /* firefox 19+ */     color: white; }  .red-va:-ms-input-placeholder {       color: white;  }  .blue-va::-webkit-input-placeholder {    color: white; }  .blue-va:-moz-placeholder { /* firefox 18- */    color: white; }  .blue-va::-moz-placeholder {  /* firefox 19+ */     color: white; }  .blue-va:-ms-input-placeholder {       color: white;  } 

basically 2 sets of css each input class, browser support requiring 4 different approaches each.

is there more elegant / streamlined way of doing this?

unfortunately, without making use of preprocessor (since css), best can group each set of vendor prefixes both .red-va , .blue-va, not of them single ruleset:

.red-va::-webkit-input-placeholder, .blue-va::-webkit-input-placeholder {    color: white; }  .red-va:-moz-placeholder, .blue-va:-moz-placeholder {   /* firefox 18- */    color: white; }  .red-va::-moz-placeholder, .blue-va::-moz-placeholder { /* firefox 19+ */     color: white; }  .red-va:-ms-input-placeholder, .blue-va:-ms-input-placeholder {     color: white;  } 

or if can afford change markup can go further adding common class both .red-va , .blue-va don't have duplicate selectors both — halving css have.

the reason can't group them 1 ruleset covered here. in short, it's because browsers required drop entire ruleset if don't recognize part of selector list, caused vendor prefixes (and in case of firefox, fact versions older 19 don't recognize pseudo-element syntax).

thankfully, prefixed pseudos thing of past.