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

Spójrz na następujący selektor:

p.eee {
	color: red;
}

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

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

Spójrz teraz na ten selektor:

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

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

Wynik wykonania kodu:

A zatem, jeszcze raz: p.eee - taki selektor wybiera akapity z klasą eee. A jeśli zrobię tak: p .eee, to wybiorę wszystkie elementy z klasą eee, znajdujące się wewnątrz akapitów. Poczuj tę różnicę.

Opowiedz, co wybiera selektor w podanym poniżej kodzie. Następnie napisz kod HTML, pasujący do tego selektora. Oto kod z selektorem:

p.bbb {
	color: red;
}

Opowiedz, co wybiera selektor w podanym poniżej kodzie. Następnie napisz kod HTML, pasujący do tego selektora. Oto kod z selektorem:

p .bbb {
	color: red;
}

Opowiedz, co wybiera selektor w podanym poniżej kodzie. Następnie napisz kod HTML, pasujący do tego selektora. Oto kod z selektorem:

.eee p.bbb {
	color: red;
}

Opowiedz, co wybiera selektor w podanym poniżej kodzie. Następnie napisz kod HTML, pasujący do tego selektora. Oto kod z selektorem:

.eee p .bbb {
	color: red;
}