Applying multiple styles to HTML elements

This document tests whether your browser can display multiple styles applied to the same element within the HTML. This document does not test browser support for descendent selectors or any other CSS markup; rather, it tests browser support for the HTML markup and application of CSS.

Test Case 1: Two separate classes applied to one element

This text is unstyled.

This text should be red and bold. Two classes are applied to the <p> tag, "red" and "bold."

Browser Support

Test Case 2: A class and an ID applied to one element

This text is unstyled.

This text should be red and bold. The <p> tag has the class "red" applied to it, and is assigned the id "boldness."

Browser Support

Test Case 3: Two grouped classes applied to one element

This text is unstyled.

This text should be red and bold. Two classes are applied to the <p> tag, "redagain" and "boldagain", which are defined together in the CSS.

Browser Support

Test Case 4: Two grouped classes applied to one element in the opposite order

This text is unstyled.

This text should be red and bold. Two classes are applied to the <p> tag, "redagain" and "boldagain", which are defined together in the CSS but in the opposite order than they are applied in the <p> tag.

Browser Support

Test Case 5: A class and an ID grouped and applied to one element

This text is unstyled.

This text should be red and bold. The <p> tag has the class "redgroup" as well as the id "boldgroup" applied to it, which are defined together in the CSS.

Browser Support

Notes

I have heard that IE5 for the Mac has problems with multiple classes when they are used in conjunction with descendent selectors. I cannot test this as I do not have access to a Mac, but welcome any examples of this behavior, since IE Mac passes these basic tests.

One confirmed bug with multiple styles: if one of your styles is a substring of another ("blah" and "blahdeblah"), MacIE will apply both styles when you use the substring style name as the first of your multiple listed classes. It's hard to explain, so let me just point you to the page that illustrates this:

http://www.macedition.com/cb/ie5macbugs/substringbug.html

If your platform/browser has not been reported on yet, please share your results with me! Also, if there are any other combinations of selectors that give certain browsers trouble, please email me at zoe at this domain name (pixelsurge.com) with suggestions of new test cases or example pages.

Conclusions (in progress)

Netscape 4.x for Windows and Mac cannot support the application of multiple classes to a single element. It results in ignoring all classes. (Test Cases 1, 3, 4) It can, however, understand the application of a class and an id to a single element. (Test Case 2) This technique only works, however, if the class and id are defined separately in the stylesheet, not grouped together. (Test Case 5)

Internet Explorer 4.x for Windows cannot support the application of multiple classes to a single element. It results in ignoring all classes. (Test Cases 1, 3, 4) It can, however, understand the application of a class and an id to a single element. (Test Case 2) This technique works even if the class and id are grouped together in the stylesheet, not defined separately. (Test Case 5) In this respect IE 4.x differs from NN 4.x.