Chyba začátečníků v selektoru potomků

Podívejte se na následující selektor:

cssp.eee {
  color: red;
}

Už byste měli vědět, že takový selektor vybere odstavce s třídou eee. Například tyto:

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

Podívejte se nyní na tento selektor:

cssp .eee {
  color: green;
}

Tento selektor se od předchozího liší tím, že mezi názvem tagu a názvem třídy je mezera. Tato mezera představuje selektor potomků. To znamená, že v tomto případě vybíráme všechny elementy s třídou eee, které se nacházejí uvnitř odstavců. Například tento selektor vybere následující spany:

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

Výsledek provedení kódu:

cssp.bbb {
  color: red;
}

cssp .bbb {
  color: red;
}

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

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