Use Double Classes in Ie6 CSS

Use double classes in IE6 CSS?

IE6 doesn't support multiple class selectors. The reason you see a change with the Orange class is because a.MenuButton.Orange is interpreted by IE6 as a.Orange.

I recommend structuring your markup in such a way that you can work around this:

<div class="leftcontent">
   <ul class="navmenu">
     <li><a class="menubutton orange" href="#">One</a></li>
     <li><a class="menubutton orange clicked" href="#">Two</a></li>
   </ul>
</div>

By grouping by a more specific ancestor you can create variation with classes scoped by that ancestor (in this example navmenu):

.leftcontent .navmenu a { /* ... basic styles ... */ }
.leftcontent .navmenu a.orange { /* ... extra orange ... */ }
.leftcontent .navmenu a.clicked { /* ... bold text ... */ }

It's not as good as multiple classes, but I've used it to work around the lack of support in IE.

Internet Explorer multiple classes

Multiple classes don't work in IE6 (it keeps the second class only, hence the behaviour you get). Which version do you exactly use?

EDIT: After Charles comment, I'm wrong about this and the problem probably comes from the display: inline-block not well understood (hence the width & height not applied because the anchor is treated like inline. Could you try with display: block instead? (it will probably break your design but at least you'll see what's going on)

Internet Explorer 6 (urgh) and CSS - applying multiple classes to a style

IE interprets

p img.blue, p img.red { /* */ }

correctly, by applying the contained styles to img elements with class="blue" which are children of p elements, or img elements with class="red" which are children of p elements.

IE doesn't understand p img.blue.red, it would only apply the style to p img.red

Using multiple-class selectors in IE7 and IE8

You want to make sure and use a doc type so you do not render in quirks mode. For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style type="text/css">
.column {
  float: left;
  display: block;
  margin-right: 20px;
  width: 60px;
  border: 1px solid;
}
.two.column {
  width: 140px;
}
.three.column {
  width: 220px;
}
.four.column {
  width: 300px;
}
</style>
</head>
<body>
<div class="two column">Two Columns</div>
<div class="three column">Three Columns</div>
<div class="four column">Four Columns</div>
</body>
</html>

Is it possible to set CSS for combined classes?

You can do this:

tr.even.highlight { ... }

Not known by IE6 though.

How to select an element with 2 classes

You can chain class selectors without a space between them:

.a.b {
     color: #666;
}

Note that, if it matters to you, IE6 treats .a.b as .b, so in that browser both div.a.b and div.b will have gray text. See this answer for a comparison between proper browsers and IE6.

CSS Selector that applies to elements with two classes

Chain both class selectors (without a space in between):

.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

If you still have to deal with ancient browsers like Internet Explorer 6, be aware that it doesn't read chained class selectors correctly: it'll only read the last class selector (.bar in this case) instead, regardless of what other classes you list.

To illustrate how other browsers and IE6 interpret this, consider this snippet:

* {
  color: black;
}

.foo.bar {
  color: red;
}

<div class="foo">1. Hello Foo</div>
<div class="foo bar">2. Hello World</div>
<div class="bar">3. Hello Bar</div>

Select element based on multiple classes

You mean two classes? "Chain" the selectors (no spaces between them):

.class1.class2 {
    /* style here */
}

This selects all elements with class1 that also have class2.

In your case:

li.left.ui-class-selector {

}

Official documentation : CSS2 class selectors.

As akamike points out a problem with this method in Internet Explorer 6 you might want to read this: Use double classes in IE6 CSS?

How to apply two CSS classes to a single element

1) Use multiple classes inside the class attribute, separated by whitespace (ref):

<a class="c1 c2">aa</a>

2) To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):

.c1.c2 {
}

multiple-class CSS inheritance problem in IE

If your page doesn't have a proper doctype declaration, IE9 will go into quirks mode and treat chained class selectors exactly like IE5/IE6 does: it'll only read the last class and apply rules accordingly.

As a result, the selector .spr.radiobutton.on is really being interpreted as just .on (rather than .spr.on), overriding the earlier rule that it thinks also has just the .on selector.

Simply give your document a doctype declaration and IE9 will behave as expected.

Use Double Classes in Ie6 CSS