Take the 2-minute tour ×

I'm not sure this is possible, but is there a syntax to be used in CSS when you want to style an element based on the combination of classes applied to it?

I understand that I can check an element with jQuery or something and change it's style based on the classes it has, but is there a pure CSS way to do this?

For example, if I have a class for bold and green:

.bold_green { color:green; font-weight:bold; }

And a class for bold and blue:

.bold_blue { color:blue; font-weight:bold. }

Now, say I am using jQuery to add and remove classes dynamically and want any element that has both classes to turn italic pink.

Something like:

.bold_green AND .bold_blue { color:pink; font-style:italic; }

Or, if I want to style an element that has aclass, and is a descendant of another element that has another class?

Something like:

.bold_green HAS_CHILD .bold_blue { color:black; background-color:yellow; }



Thanks for all the answers. These are pretty much what I thought (just treating the classes as regular selectors), but they don't seem to be working for me. I will have to check my code and make sure they aren't being overridden somehow...

share|improve this question
Didn't you mean to use color: blue in the bold_blue class? –  BalusC Mar 16 '10 at 0:32
Yep =o) |||||||| –  Eli Mar 16 '10 at 3:48
as a sidenote, if you have classes like bold_green, then there's probably something wrong with the way you're designing. <insert semantics spiel> –  Mark Mar 16 '10 at 3:51
Dude. It's an example. –  Eli Mar 16 '10 at 22:53

3 Answers 3

up vote 32 down vote accepted

Or in CSS:

.bold_green.bold_blue { color: pink; }

Notice there's no space between the selectors.

share|improve this answer
There are IE compatibility issues though, no? –  Richard JP Le Guen Mar 16 '10 at 0:33
Yes, IE6 will read that css as .bold_blue { color: pink; }. You should use a variation of the jQuery Paul provided since jQuery can select it properly, and add a new class with appropriate css: .something-else { color: pink; } I also hope those aren't real class names. –  Isley Aardvark Mar 16 '10 at 0:48
Ideally, you add the CSS as recommended here first, and then add the jQuery mentioned inside a conditional comment for IE6. –  Eric M Suzanne Mar 16 '10 at 7:46
Can anyone point to this in the CSS spec? –  aaaidan Oct 31 '12 at 3:55
Hrm, mentioned here ... w3.org/TR/CSS2/selector.html#class-html ... 'To match a subset of "class" values, each value must be preceded by a ".".' –  aaaidan Oct 31 '12 at 4:02

You don't need anything special, just

.bold_green.bold_blue { color:pink; font-style:italic; }
share|improve this answer

Paul and Voyager are correct for the multiple classes case.

For the "HAS CHILD" case you would use:

.bold_green .bold_blue { ... } /* note the ' ' (called the descendant selector) */

Which will style any bold_blue elements inside a bold_green element.

Or if you wanted a DIRECT child:

.bold_green > .bold_blue { ... } /* this child selector does not work in IE6 */

Which will style only bold_blue elements which have an immediate parent bold_green.

share|improve this answer

Your Answer


