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

Question

I am trying to set the color (font-color) attribute for the placholder pseudo class for a multiple classes of inputs.

(So I want all inputs with class .red-va or .blue-va to have placeholder text of a 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 two sets of CSS for each input class, with browser support requiring four different approaches for each.

Is there a more elegant / streamlined way of doing this?

Why are there so many variations? They're just colors; do the browsers really handle them all differently? Or are you trying to color-code the browsers? — Robert Harvey, Apr 25 '15 at 23:57
@Robert Harvey: Not the colors, but the placeholder selectors. Welcome to CSS. — BoltClock, Apr 26 '15 at 04:40
It might be possible (although not necessary) to reduce this with a CSS preprocessor like Sass or LESS (though ultimately it would de-compile to the same thing when interpreted by the browser). — TylerH, Apr 26 '15 at 04:49
@TylerH It is possible to shorten the written code with a preprocessor — Zach Saucier, Apr 26 '15 at 04:52

score 4 · Accepted Answer · edited May 23 '17 at 12:22

Unfortunately, without making use of a preprocessor (since this is CSS), the best you can do is to group each set of vendor prefixes for both .red-va and .blue-va, but not all of them into a 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 you can afford to change the markup you can go further by adding a common class to both .red-va and .blue-va so you don't have to duplicate your selectors for both — effectively halving the CSS that you currently have.

The reason you can't group them all into one ruleset is covered here. In short, it's because browsers are required to drop an entire ruleset if they don't recognize any part of the selector list, which will be caused by the vendor prefixes (and in the case of Firefox, also by the fact that versions older than 19 don't recognize the pseudo-element syntax).

Thankfully, prefixed pseudos will soon be a thing of the past.

Many thanks - interesting explanation of what the unusual behavior here was. Makes perfect sense now. I've done as you advised :) — Gideon, Apr 27 '15 at 06:14

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

1 Answers1