tags:

views:

845

answers:

4

You can use more than one css class in an HTML tag in current web browsers, e.g.:

<div class="style1 style2 style3">foo bar</div>

This hasn't always worked; with which versions did the major browsers begin correctly supporting this feature?

+1  A: 

Apparently IE 6 doesn't handle these correctly if you have CSS selectors that contain multiple class names: http://www.ryanbrill.com/archives/multiple-classes-in-ie/

Wayne Kao
A: 

I believe Firefox has always supported this, at least since v1.5 anyway. IE only added full support in v7. IE6 does partially support it, but its pretty buggy, so don't count on it working properly.

Nathan Reed
+1  A: 

According to blooberry, IE4 and Netscape 4.x do not support this. HTML 4.0 spec says

class = cdata-list [CS]

This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

eed3si9n
+4  A: 

@Wayne Kao - IE6 has no problem reading more than one class name on an element, and applying styles that belong to each class. What the article is referring to is creating new styles based on the combination of class names.

<div class="bold italic">content</div>

.bold {
  font-weight: 800;
}

.italic {
  font-style: italic;
{

IE6 would apply both bold and italic styles to the div. However, say we wanted all elements that have bold and italic classes to also be purple. In Firefox (or possibly IE7, not sure), we could write something like this:

.bold.italic {
  color: purple;
}

That would not work in IE6.

Bryan M.