when declaring css styles, what is the meaning of .classA.classB (two class names with a dot in the middle and no space)

Question

I know when there is a space in between, it will look for the class on the right within the class on the left.

.classA .classB {
    ...
}

However, what does it look for when there is no space?

.classA.classB {
    ...
}

An element which contains both classes. Read here: http://stackoverflow.com/questions/5116288/css-select-an-element-with-2-class — Adam Fratino, Oct 08 '14 at 17:40
@LcSalazar I'm sure 50 answers will pop up by the time I post one. — Adam Fratino, Oct 08 '14 at 17:43
possible duplicate of [CSS Selector that applies to elements with two classes](http://stackoverflow.com/questions/3772290/css-selector-that-applies-to-elements-with-two-classes), [http://stackoverflow.com/questions/3918742/css-styling-when-element-has-two-classes](http://stackoverflow.com/questions/3918742/css-styling-when-element-has-two-classes), [http://stackoverflow.com/questions/5796654/css-rule-to-apply-only-if-element-has-both-classes](http://stackoverflow.com/questions/5796654/css-rule-to-apply-only-if-element-has-both-classes)... — War10ck, Oct 08 '14 at 17:43
@88MPG - If you had posted it by the time you posted the comment, you would be upvoted instead of answers popping up... — LcSalazar, Oct 08 '14 at 17:45
@LcSalazar You're right, I posted an answer with some syntax examples and references. — Adam Fratino, Oct 08 '14 at 17:47
@War10ck - agree that those posts are about same topic. However, those posts are asking the question from the other direction. In other words, they are asking how to do something, whereas my question was, I found something in the code but I don't know what it is doing. — obai, Oct 08 '14 at 18:50

score 3 · Accepted Answer · edited May 23 '17 at 10:33

The first example (space-separated classes) is a parent-child relationship. .classB is found inside .classA.

<div class="classA">
    <div class="classB"></div>
</div>

The second is for one element with multiple classes, like so:

<div class="classA classB"></div>

Very different situations, but both extremely useful!

score 1 · Answer 2 · answered Oct 08 '14 at 17:42

1

It's used when you need an element, with both classes.

<div class="classA classB"></div>

would match

.classA.classB{}

answered Oct 08 '14 at 17:42

Frederik Spang

score 1 · Answer 3 · answered Oct 08 '14 at 17:42

1

In the first example .classA .classB you're selecting elements with the class classB that are descendants of elements that have classA.

In the second example .classA.classB you're selecting elements that have both classes classA and classB.

answered Oct 08 '14 at 17:42

j08691

3 Answers3