What does a space mean in a CSS selector? i.e. Wha

Question

What is the difference between these two selectors?

.classA.classB {
  border: 1px solid;
}

.classA .classB {
  border: 1px solid;
}

Answer 1

A style like this is far more common, and would target any type of element of class "classB" that is nested inside any type of element of class "classA".

.classA .classB {
  border: 1px solid; }

It would work, for example, on:

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

This one, however, targets any type of element that is both class "classA", as well as class "classB". This type of style is less frequently seen, but still useful in some circumstances.

.classA.classB {
  border: 1px solid; }

This would apply to this example:

<p class="classA classB">asdf</p>

However, it would have no effect on the following:

<p class="classA">fail</p>
<p class="classB">fail</p>

(Note that when an HTML element has multiple classes, they are separated by spaces.)

Answer 2

.classA.classB refers to an element that has both classes A and B (class="classA classB"); whereas .classA .classB refers to an element with class="classB" descended from an element with class="classA".

Edit: Spec for reference: Attribute Selectors (See section 5.8.3 Class Selectors)