Is there a way to query for element with multiple classes in CSS?

Question

How do I query for an element that have two classes at the same time?

For example:

<div><span class="major minor">Test</span></div>

I want to style all the spans that have "major" and "minor" classes at the same time.

Answer 1

The following should do the trick:

span.major.minor { color: red; }

Note you have to be careful with this with Internet Explorer 6 - it will only read the last class of the selector. For example, it will incorrectly apply the rule above to the following:

<span class="minor">Test</span>

Answer 2

Use the class qualifier twice, eg.:

.major.minor { ... }

But. It doesn't work in IE6 (or in IE7 either when in Quirks Mode). When you specify multiple class selectors on the same element, IE only pays attention to the last one. So the above selector would match any element with class="minor".

Workarounds include duplicating multiple classes as a single class:

.major-minor { ... }
<span class="major minor major-minor">...</span>

Or, if spare elements are available to make it clean, containment:

.major .minor { ... }
<span class="major"><span class="minor">...</span></span>