Błąd początkującego w selektorze potomków

Spójrz na następujący selektor:

cssp.eee {
  color: red;
}

Powinieneś już wiedzieć, że taki selektor wybierze akapity z klasą eee. Na przykład te:

html<p class="eee">
  lorem ipsum
</p>
<p class="eee">
  lorem ipsum
</p>

Spójrz teraz na ten selektor:

cssp .eee {
  color: green;
}

Ten selektor różni się od poprzedniego tym, że między nazwą tagu a nazwą klasy znajduje się spacja. Ta spacja reprezentuje selektor potomków. Oznacza to, że w tym przypadku wybieramy wszystkie elementy z klasą eee, znajdujące się wewnątrz akapitów. Na przykład ten selektor wybierze następujące spany:

html<p>
  lorem <span class="eee">ipsum</span>
</p>
<p>
  lorem <span class="eee">ipsum</span>
</p>

Wynik wykonania kodu:

cssp.bbb {
  color: red;
}

cssp .bbb {
  color: red;
}

css.eee p.bbb {
  color: red;
}

css.eee p .bbb {
  color: red;
}