James Oppenheim’s blog

It is possible to use multiple CSS classes on one HTML element. For example:

class="first second"

This is fantastic to produce reusable default styles that can be slightly overridden by the use of a second, third or fourth class. However, what becomes more interesting is that you can use both of the CSS classes in combination to create a more specific class.

For example, if the first class was ‘green’:


.first {
background-color: green;
}


and the ’second’ class was red:


.second {
background-color: red;
}


But when an element has both classes together ‘.first.second’ you get yellow.

.first.second {
background-color: yellow;
}

A point to note with the multiple classes is that the order is not important, for example: ‘.first.second’ is the same as ‘.second.first’.

However, there is a problem! In IE6, ‘.first.second’ works exactly the same way as ‘.second’. This is because IE6 doesn’t understand the chain of classes within a CSS selector, but instead only reads the last class in the chain.

Because of this we can’t safely use this technique if we want to support IE6. However, we can use it to create a IE6 CSS hack! To do this we add a random class that does not exist on the element before the real one and only IE6 will still match it. For example:


.ie6.third {
background-color: orange;
}


I have setup a demo page to demonstrate the multiple CSS classes & the IE6 CSS hack.

Technorati Tags: CSS, Examples, Web Standards, IE6, CSS hacks

This entry was posted on Sunday, May 24th, 2009 at 9:37 pm and is filed under Areeba, LinkedIn, Examples, Web Standards, CSS, Personal. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.