Working with Multiple Class Names

Multiple Class Names

An element's class attribute can have multiple values, each separated by whitespace. This is a very powerful features of CSS, allowing you to apply styles from more than one class to any element. To quote the HTML spec:

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.

An element with two classes looks like this:

HTML Example

<a class='class2 class1' href='/'>link</a>

CSS File

.class1{ color: black; }
.class2{ color: red; }

In the above example, the link color would be red. This is because the specificity for both selectors is the same (10). The conflict is won by the overriding class, class2.

Not so with the following css:

CSS File 2

a.class1{ color: black; }
.class2{ color: red; }

Using the HTML the first example, the link color would be black.

 

Tags

Archived Scripts

*AnimTree
*Tabs
*GlideMenus
*DragLib