Что означает пробел в селекторе CSS? Т.е. в чем разница между .classA.classB и .classA .classB?

Question

В чем разница между этими двумя селекторами?

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

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

Answer 1

.classA.classB относится к элементу, который имеет оба класса A и B (class="classA classB"); тогда как .classA .classB относится к элементу с class="classB", произошедшему от элемента с class="classA".

Редактировать: Спецификация для справки: Селекторы атрибутов (см. Раздел 5.8.3 Селекторы классов)

Answer 2

Подобный стиль встречается гораздо чаще и предназначен для любого типа элемента класса "classB", который вложен в любой тип элемента класса "classA".

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

Это будет работать, например, на:

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

Однако этот элемент предназначен для любого типа элемента, который относится как к классу "classA", так и к классу "classB". Этот тип стиля встречается реже, но в некоторых обстоятельствах он все же полезен.

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

Это применимо к этому примеру:

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

Однако это не повлияет на следующее:

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

(Обратите внимание, что когда элемент HTML имеет несколько классов, они разделяются пробелами.)

Answer 3

Он официально известен как «потомок комбинатор».

Прочтите об этом на MDN или в CSS спецификации