Greška početnika u selektoru potomaka

Pogledajte sledeći selector:

p.eee {
	color: red;
}

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

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

Sada pogledajte ovaj selector:

p .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:

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

Rezultat izvršavanja koda:

Dakle, još jednom: p.eee - takav selector bira paragrafe sa klasom eee. A ako uradim ovako: p .eee, onda biram sve elemente sa klasom eee, koji se nalaze unutar paragrafa. Osetite ovu razliku.

Objasnite šta bira selector u datom kodu ispod. Zatim napišite HTML kod koji odgovara ovom selectoru. Evo koda sa selektorom:

p.bbb {
	color: red;
}

Objasnite šta bira selector u datom kodu ispod. Zatim napišite HTML kod koji odgovara ovom selectoru. Evo koda sa selektorom:

p .bbb {
	color: red;
}

Objasnite šta bira selector u datom kodu ispod. Zatim napišite HTML kod koji odgovara ovom selectoru. Evo koda sa selektorom:

.eee p.bbb {
	color: red;
}

Objasnite šta bira selector u datom kodu ispod. Zatim napišite HTML kod koji odgovara ovom selectoru. Evo koda sa selektorom:

.eee p .bbb {
	color: red;
}