Greška početnika u selektoru potomaka

Pogledajte sledeći selector:

cssp.eee {
  color: red;
}

Već biste trebalo da znate da će takav selector izabrati paragrafe sa klasom eee. Na primer, ove:

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

Sada pogledajte ovaj selector:

cssp .eee {
  color: green;
}

Ovaj selector se razlikuje od prethodnog po tome što između imena taga i imena klase ima razmak. Taj razmak predstavlja selektor potomaka. To jest u ovom slučaju mi biramo sve elemente sa klasom eee, koji se nalaze unutar paragrafa. Na primer, ovaj selector će izabrati sledeće span elemente:

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

Rezultat izvršavanja koda:

cssp.bbb {
  color: red;
}

cssp .bbb {
  color: red;
}

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

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