CSS – Using AND in classes

I am totally stunned that I have gone so long without knowing this works.

<div class=”foo bar”>ONE</div>
<div class=”foo”>TWO</div>
<div class=”bar”>THREE</div>

Before today, I didn’t think you could make a single-line CSS statement that affected ONLY number ONE and not TWO AND THREE.  Previously, I would do torturous workarounds.  But I was just informed today by Scott Sauyet on the jQuery forum that, not only is it possible, it is easy.

div.foo.bar {color:red}

This worked!  I can’t believe it.  It’s unbelievable.  I have wasted so much time.  I am stunned.  Shocked and surprised.  I am awed.   WOW.

UPDATE:  THIS IS ALL WRONG.  DOESN’T WORK.

I can’t believe it, but it’s true.  I was so happy.  Now, I am so sad.  Please ignore this post.  It would kickass if it worked, but it doesn’t.  The above example in IE6 gives the first and third as red.  Apparently it has something to do with the last one.  If I change the order of the call, then it colors the first and second one.  The last one is called but not the internal one.  Boooooooo IE6