Що означає пробіл у селекторі CSS? тобто у чому різниця між .classA.classB та .classA .classB?

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

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

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

.classA.classBвідноситься до елемента, який має як класи A, так і B ( class="classA classB"); тоді як .classA .classBвідноситься до елемента, що class="classB"походить від елемента з class="classA".

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

Подібний стиль є набагато більш поширеним і націлений на будь-який тип елемента класу "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 має кілька класів, вони розділяються пробілами.)

.classA.classBце означає, що будуть вибрані елементи з іменем обох класів, тоді як .classA .classBозначає, що буде вибрано лише елемент із іменем класу classBвсередині classA.