What kind of a CSS selector can I use to select an element that has more than one class?

Question

I have the following HTML:

<div class="block-content no-title grey-bg">

How can I set the background of this div to the color to #333?

Is there some kind of CSS selector that I can use to select just those block-content divs that have grey-bg?

Possible Duplicate: **[CSS Selector that applies to elements with two classes](http://stackoverflow.com/questions/3772290/css-selector-that-applies-to-elements-with-two-classes)** — Siva Charan, Dec 31 '12 at 14:18
Refer the **[documentation](http://www.w3.org/TR/CSS2/selector.html#class-html)** for more details — Siva Charan, Dec 31 '12 at 14:19

11684 · Accepted Answer · 2012-12-31T14:37:10.910

9

There is something strange about your question.
This:

How can I set the background of this div to the color to #333?

Indicates you want this selector: [.grey-bg][.no-title][.block-content] (use one or more of the parts in square brackets).
This:

Is there some kind of CSS selector that I can use to select just those block-content divs that have grey-bg?

indicates you want this: .grey-bg.block-content.

edited Dec 31 '12 at 14:37

answered Dec 31 '12 at 13:56

11684

7,356
12
48
71

Actually mine was correct, yours as you originally wrote it was incorrect. – Cliff Ribaudo Dec 31 '12 at 14:00
No, it was the same initially. – 11684 Dec 31 '12 at 14:03
I reversed the classes, what has exactly NO meaning in CSS. Actually, the browser reads the selectors from right to left, so your answer was reversed. @CliffRibaudo – 11684 Dec 31 '12 at 14:04
Yeah... your right, sorry. I will delete my answer so you can get the glory :) – Cliff Ribaudo Dec 31 '12 at 14:12

score 1 · Answer 2 · answered Dec 31 '12 at 14:11

in css the space (or lack thereof) between selectors indicates either descendant or same dom object i.e.

<span class="a b">
    <span class="c"></span>
    <span class="b"></span>
</span>

//some css selector examples

.a.b{} //gets the first span (get all elements which have class .a and .b)
.a .b{} //gets the third (nested in a.b after .c - get all .b that are descendants of .a)
.b{}   //gets the first and third (get all .b)
.b>.b{} //gets the third (get all direct descendants of .b which are .b)
.b>.c+.b{} //gets the third (next sibling .b of a .c which is direct descendant of a .b)

What kind of a CSS selector can I use to select an element that has more than one class?

2 Answers2