Working with Multiple Class Names

Combined Class Selector

• Setting Style with JS

• Multiple Class Names
• Combined Class Selector
• Combined Pseudo-class

Selectors can also use multiple classes (spec). For example, to declare a rule for elements that have class heavy that also have class tight, you would use:

.heavy.tight {
    letter-spacing: .02em;
} 

This is a combination class selector. It does not select elements with either class, rather, it selects only elements that have both classes.

<!--  Not selected by .heavy.tight-->
<a class='heavy' href='/'>link</a>

<!--  Selected by .heavy.tight -->
<a class='heavy tight' href='/'>link</a>

Compatibility

Most CSS2 aware browsers support multiple classes. This includes Internet Explorer for Windows, Mozilla, Opera, and iCab. Internet Explorer for Macintosh has a serious flaw with the implementation of multiple classes.

Multiple Classes in Internet Explorer for Macintosh

Internet Explorer for Macintosh does not properly handle multiple classes because its HTML parser does not properly handle whitespace in the class attribute.

For any element has a class specified where that class is a substring of another class selector defined in the stylesheet, the rule for the other selector will apply to that element.

Example

<a class="tab  " href='/'>link</a>

Mac IE will apply rules for any class selector matching the "tab" substring, such as the one below

   /* Mac IE reads this for class="tab  " 
    */ 
	.tabActive{ }

One way to prevent that is to use a different tag, such as:

   /* Mac IE reads this for <span class="tab ", 
    * but not for <a class="tab "
    */
	span.tabActive{ }

See this test case for more information.

More Mac IE Problems - Dual Selectors

When a stylesheet has a combined class selector, it will apply the style rule to all elements that have the last class in the selector.

It should either ignore the rule (CSS1) or apply the selector only to elements that correctly match the whole selector (CSS2).

Demo

Dual Selectors