Can you target an element with CSS only if 2 classes are present?

Solution 1:

Yes, just concatenate them: .content.main. See CSS class selector.

But note that the Internet Explorer up to version 6 doesn’t support multiple class selectors and just honors the last class name.

Solution 2:

Just for the sake of it (I don't really recommend you do this), there is another way to do it:

.content[class~="main"] {}

Or:

.main[class~="content"] {}

Reference: http://www.w3.org/TR/CSS2/selector.html

E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning"

Demo: http://jsfiddle.net/eXrSg/

Why this is actually useful (for IE6 at least):

Since IE6 does not support multiple classes, we can't use .content.main, but there are some javascript libraries like IE-7.js that enable the attribute selector, but still seem to fail when it comes to multiple classes. I have tested this workaround in IE6 with javascript enabling the attribute selector, and it is ugly, but it works.

I have yet to find a script that makes IE6 support multiple class selectors but have found many that enable attribute selectors. If someone knows of one that works, please give me a shout in the comments so I can be rid of this workaround.