Multiple Classes

Suppose that you have a situation where you have defined two classes that you are using on your page. Some of the elements of your page use one class and some use the other. As you are applying the class attributes to the various tags you suddenly come to a tag that requires both classes.

Fortunately this situation doesn't cause a problem. We simply add one class attribute and put both class names in it separated by a space like this:

<div class="mystyle1 mystyle2">

With this definition the entries in the stylesheet for both styles will be applied to this section of the page.

What happens if the two classes supply contradictory style information? Well this is resolved in the same way that all such conflicts between the styles you define are resolved. The standard priority rules are applied to the referenced definitions within the stylesheet to determine which of the definitions takes precedence over the other. Everything else being equal the one defined last in the stylesheet will take precedence. The order of the classes within the class attribute has no effect.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow