CSS rule ".drop.a" being applied to class "drag a"
css, css-selectors, internet-explorer, internet-explorer-9
Solution
I thought this kind of CSS was universally compatible with all browsers?
Nope. IE up to and including version 6 ignores all class selectors in a chain except the last one. IE9 may be rendering your page in quirks mode, meaning it'll act like its predecessors, and treat your `.drop.a` selector as `.a` instead.
Try adding a doctype declaration to your page and see if that fixes it. If you already have one on your page and you're still seeing this behavior, something else is wrong.
Problem
I have the following HTML markup: ``` <div class="drag a"></div> <div class="drop a"></div> ``` I also have the following CSS rule, which should only be applied to my 2nd div: ``` .drop.a { background-color:red; } ``` This is working fine, except in Internet Explorer 9 the CSS rule is being applied to both elements. Why is this? I thought this kind of CSS was universally compatible with all browsers?