Классы через пробел и без него

Когда атрибут class имеет значение active

Когда атрибут class имеет значение active

Не работает.

Работает.

Работает.

Работает.

<style>
.active {
  color: red;
}
.tab1 {
  background: khaki;
}
.tab2 {
  border: solid darkseagreen;
}
</style>

<div>Не работает.</div>
<div class="active">Работает.</div>
<div class="tab1 active">Работает.</div> <!-- В атрибуте class несколько значений перечисляются через пробел. -->
<div class="tab2 active">Работает.</div>

Когда атрибут class имеет оба значения: и tab2, и active

Не работает.

Не работает.

Работает.

Работает.

<style>
.tab2.active { /* без пробела — ограничиваем наличием дополнительного класса у элемента */
  color: red;
}
.tab1 {
  background: khaki;
}
.tab2 {
  border: solid darkseagreen;
}
</style>

<div class="active">Не работает.</div>
<div class="tab1 active">Не работает.</div>
<div class="tab2 active">Работает.</div>
<div class="tab1 tab2 active">Работает.</div>

Когда атрибут class имеет значение active и родителя с class="tab2"

Не работает.

Не работает.

Работает.

Работает.

<style>
.tab2 .active { /* с пробелом — ограничиваем наличием родителя с нужным классом */
  color: red;
}
.tab1 {
  background: khaki;
}
.tab2 {
  border: solid darkseagreen;
}
</style>

<div class="tab1">
  <div class="active">Не работает.</div>
</div>
<div class="tab2 active">Не работает.</div>
<div class="tab2">
  <div class="active">Работает.</div>
</div>
<div class="tab1 tab2">
  <div class="active">Работает.</div>
</div>