2 Classes on an element?


I’ve seen on some web sites there’s classes like

<span class="menuitem active">Active Link</span>
<span class="menuitem">Regular Link</span>

I’d like to style my Active link differently.

How would I code this differently in my CSS, to the regular .menuitem {} class ?

Many thanks.

By adding multiple classes to a class tag in html, you are just assigning multiple css classes to the element.

So if you have:

<span class=“bla1 bla2 bla3”>blablabla</span>

.bla1 {color:#ff0000;}
.bla2 {text-decoration:underline;}
.bla3 {font-size:34px;}

…then it will apply all the styles listed in the class attribute in html to that element in list form. So if you have 2 properties that are the same, it will overwrite the first property with the 2nd instance of that property by line number from the css file.

You can set !important on a line of css to not allow overriting of the property.

Brilliant! Many thanks, Andrew. I now remember where/why to use it :slight_smile:

Thank you.

One think Andrew didn’t mention is that you can use CSS to style elements with both classes set. For example

<span class="menuitem active">Active Link</span>
.menuitem.active{/*this will select the above code only (or another item with both classes set*/}

IE6 only partially supports it though so if you need to select both it’d be best just to assign an ID :slight_smile:

…and just to point out, the example code first posted has a code smell… looks like dreambeaver.

While you might have a class on each menu item, if every menu item has the same class (esp with a name like “menuitem”) then more likely than not, it’s like George Foreman naming all his kids George. The name is useless for differentiating anyone, so you might as well chuck them and call them #menuID li a {stuff;} instead.