{"id":43,"date":"2005-05-16T16:12:50","date_gmt":"2005-05-16T06:12:50","guid":{"rendered":"http:\/\/www.thunderguy.com\/semicolon\/20050516\/multiple-class-selectors-in-internet-explorer\/"},"modified":"2009-12-04T22:41:43","modified_gmt":"2009-12-04T09:41:43","slug":"multiple-class-selectors-in-internet-explorer","status":"publish","type":"post","link":"https:\/\/thunderguy.com\/semicolon\/2005\/05\/16\/multiple-class-selectors-in-internet-explorer\/","title":{"rendered":"Multiple class selectors in Internet Explorer"},"content":{"rendered":"

Current Windows Internet Explorer versions do not support multiple class selectors in style sheets. This has been well known for a while; this article shows a technique I have used to work around this limitation.<\/p>\n

Windows Internet Explorer version 5.0, 5.5 and 6.0 see only the last class name in any CSS rule that uses multiple class selectors. For example, the selector p.blue.green<\/code> is interpreted exactly as if it read p.green<\/code>. Here’s an example.<\/p>\n

<html>\r\n<head>\r\n<title>Test<\/title>\r\n<style type=\"text\/css\">\r\np.blue { color: blue; background-color: #ccf; }\r\np.red.blue { color: magenta; }\r\np.green.blue { color: cyan; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<p class=\"blue\">class=\"blue\" (should be blue with light blue background)<\/p>\r\n<p class=\"red blue\">class=\"red blue\" (should be magenta with light blue background)<\/p>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
Firefox (for example) renders this page correctly, with the first line blue and the second line magenta. Windows Internet Explorer (versions 5, 5.5 and 6) display both lines as cyan, because they see all three stylesheet rules as applying to p.blue<\/code>, and the last one takes precedence.<\/p>\n
You can work around this in a systematic (though ugly) way as follows. Replace each multiple class selector rule with a single class selector, where the class name is a combination of the multiple class names. Then in the HTML , add the new combined class name to the class list of the applicable elements. Note you have to add<\/em> the new class, not replace the existing ones, because otherwise any single-class selector rules will no longer apply to the element. Here is an example of a page extract.<\/p>\n
<style>\r\nelement.class1.class2.class3 { }\r\n<\/style>\r\n...\r\n<element class=\"class1 class2 class3\"><\/code><\/pre>\n
And here is the extract after applying the transformation.<\/p>\n
<style>\r\nelement.class1-class2-class3 { }\r\n<\/style>\r\n...\r\n<element class=\"class1 class2 class3 class1-class2-class3 \"><\/code><\/pre>\n
Applying the transformation to the initial example yields the following, which works in Internet Explorer as well as Firefox and other browsers.<\/p>\n
<html>\r\n<head>\r\n<title>Test<\/title>\r\n<style type=\"text\/css\">\r\np.blue { color: blue; background-color: #ccf; }\r\np.red-blue { color: magenta; }\r\np.green-blue { color: cyan; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<p class=\"blue\">class=\"blue\" (should be blue with light blue background)<\/p>\r\n<p class=\"red blue red-blue\">class=\"red blue red-blue\" (should be magenta with light blue background)<\/p>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
This could quickly become confusing and inflexible, so it’s best to keep it to a minimum. No doubt it gets more complex when combining it with other selectors (ID selectors, pseudo-class, etc.). The technique shown here can at least help in the common multiple-class case.<\/p>\n","protected":false},"excerpt":{"rendered":"
Current Windows Internet Explorer versions do not support multiple class selectors in style sheets. This has been well known for a while; this article shows a technique I have used to work around this limitation. Windows Internet Explorer version 5.0, 5.5 and 6.0 see only the last class name in any CSS rule that uses […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[36,34,35],"class_list":["post-43","post","type-post","status-publish","format-standard","hentry","category-general","tag-css","tag-html","tag-internet-explorer"],"_links":{"self":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":1,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/43\/revisions"}],"predecessor-version":[{"id":279,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/43\/revisions\/279"}],"wp:attachment":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/media?parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/categories?post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/tags?post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}