Nybörjarmisstag i avkommarselektorn

Titta på följande selektor:

cssp.eee {
  color: red;
}

Du borde redan veta att en sådan selektor kommer att välja ut stycken med klassen eee. Till exempel dessa:

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

Titta nu på den här selektorn:

cssp .eee {
  color: green;
}

Denna selektor skiljer sig från den föregående genom att det mellan taggnamnet och klassnamnet finns ett mellanslag. Detta mellanslag representerar en avkommarselektor. Det betyder att i det här fallet väljer vi alla element med klassen eee, som finns inuti stycken. Till exempel kommer denna selektor att välja följande spann:

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

Resultat av kodkörning:

cssp.bbb {
  color: red;
}

cssp .bbb {
  color: red;
}

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

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