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; }

If you're looking to style an element with two specified classes, there's your answer. If *any two* classes, I'm not so sure about that. — BoltClock, Oct 12 '10 at 20:30
What you have works. Note that IE6 does not support class overloading. It only recognizes the last class. — Jason McCreary, Oct 12 '10 at 20:30
For an illustration of @Jason McCreary's point about IE6, see [my answer to a duplicate of this question](http://stackoverflow.com/questions/3772290/css-selector-that-applies-to-elements-with-two-classes/3772305#3772305) — BoltClock, Oct 12 '10 at 20:31

score 25 · Accepted Answer · answered Oct 12 '10 at 20:30

25

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

answered Oct 12 '10 at 20:30

meder omuraliev

183,342
71
393
434

1

Thanks, I guess css is intuitive! – superUntitled Oct 12 '10 at 20:31
3

@superUntitled Do you still stand for that...? :) – Manuel Reis Sep 02 '15 at 09:01

score 3 · Answer 2 · answered Oct 12 '10 at 20:33

3

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

Hope that helps :)

Nick

answered Oct 12 '10 at 20:33

Nicholas Mayne

1,694
14
18

score 0 · Answer 3 · answered Oct 12 '10 at 20:33

0

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.

answered Oct 12 '10 at 20:33

GSto

41,512
37
133
184

CSS: styling when element has two classes

3 Answers3

Linked