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

Question

As you probably already know, you may have multiple classes on elements separated by a space.

Example

<div class="content main"></div>

And with CSS you can target that div with either .content or .main. Is there a way to target it if and only if both classes are present?

Example

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

Which CSS selector would I use to get the first div only (assume I can't use .content:first-child or similar)?

Answer 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.