help - is there a class && selector?

[PrimeLens]

Hi ... here's a tricky situation that I'm in ... its best explained with an example

I want to write a rule that will select an element only if it is of class "about-banner" and of class "third" from the following HTML

<div class="about-banner"></div>
<div class="third"></div>
<div class="about-banner third">This is the one I want to select</div>
<div class="about-banner half"></div>
<div class="about-banner quarter"></div>

How do I write it? My instinct would be to write

.about-banner.third {}

or

.about-banner && .third {}

If its not possible thats cool, just would like to know. Thanks in advance


edit post:
I know that I could wrap it in a container
<div class="about-banners"> ... </div>
.about-banners .third {}
but I'm trying to avoid doing so

[Paul O'B]

How do I write it? My instinct would be to write

.about-banner.third {}

Your instincts are correct and the above is the correct way to do it. You just use dot separated classes to concatanate them and you can add as many classes as you need (within reason).

(IE6 has problems with it but if you don't need to support IE6 then don't worry about it.)

[kohoutek]

You can also do it with attribute selectors. It works from IE7 onwards.

.banner-about[class*="third"]

[PrimeLens]

werd. respec'