CSS: styling when element has two classes

Question

I have been looking at the w3 page on css selectors and have not found any promising leads, so I thought I would ask...

Is there a way to style a single element with two classes differently than if it was one class?

Example:

<a class="foo">Red</a>
<a class="bar">Yellow</a>
<a class="foo bar">Orange</a>

a.foo { color:red; }
a.bar { color:yellow; }
a.foo.bar { color:orange; }

Answer 1

You just answered yourself. Be wary of the IE6 bug.

Answer 2

I just tried the code you put up, and it works fine (on Chrome at least). Maybe there is a mistake in your CSS elsewhere, or some other style is overriding it.

Answer 3

Yeah dude, you have just answered it yourself. Have a quick scan on these two pages -

1. http://webdesign.about.com/od/css/qt/tipcssmulticlas.htm
2. http://www.maxdesign.com.au/articles/multiple-classes/

Hope that helps :)

Nick