inputのplaceholderの文字色をcssで変えた時に起きたIE11の不具合

滅多に遭遇する事はないと思われるのですが、自分の備忘録として。

フォームのinputなどにあるplaceholder、あそこの色を変えてほしいという話が合った時の事。
プレースホルダーのスタイル指定をする際はwebkit系は::-webkit-input-placeholder、
moz系は::-moz-placeholder、
そしてms系はIE11なら:-ms-input-placeholder、
、Edgeなら::-ms-input-placeholderを記述して指定する必要があります。
IE11以外は擬似クラスではなくて擬似要素とはいえ、指定する内容は一緒なので
複数セレクタをカンマで区切って指定する、いつものノリでマークアップした訳です。

↓こんな感じで。

.class-name input::-webkit-input-placeholder,
.class-name input::-moz-placeholder,
.class-name input::-ms-input-placeholder,
.class-name input:-ms-input-placeholder {
    color: #aaa;
}

結論から先に言うと、IE11だけcssが効きませんでした。
他のブラウザはちゃんと色が変わりましたが、IEだけはデフォルトのままです。

で、どうやったら効いたかと言うと。

.class-name input::-webkit-input-placeholder,
.class-name input::-moz-placeholder,
.class-name input::-ms-input-placeholder {
    color: #aaa;
}
.class-name input:-ms-input-placeholder {
    color: #aaa;
}

IE11用の擬似クラスに対する指定だけ分けて記述したら効きました。
同じ擬似クラスかつ-ms-なら複数指定しても大丈夫ですが、
擬似要素は同じ-ms-のベンダープレフィックスがついていてもダメな模様。
ちなみに、擬似クラスでも別のベンダープレフィックスがついたものはアウト。
とにかく、混ぜるな危険という事らしい…。

CSSプロパティに対するベンダープレフィックスはこれまで複数一緒に指定してきていても
問題なかったので（記述順番の問題はちょっとありましたが）、
複数セレクタでも問題ないだろうと思ってたら思わぬ落とし穴でした。

なんというか

えーと…

相変わらずIEって奴は手のかかる子ですね…。

WEBに似たようなケースというか、解説ないかなと思ったのですが、
探し方が悪いのか結局見つからず。
「どうしてこうなった」状態なので、もしご存知の方いらっしゃいましたら
そっと教えて頂けると助かります。