Chyba začiatočníkov v selektore potomkov

Pozrite sa na nasledujúci selektor:

p.eee {
	color: red;
}

Už by ste mali vedieť, že takýto selektor vyberie odseky s triedou eee. Napríklad tieto:

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

Pozrite sa teraz na tento selektor:

p .eee {
	color: green;
}

Tento selektor sa líši od predchádzajúceho tým, že medzi názvom elementu a názvom triedy je medzera. Táto medzera predstavuje selektor potomkov. To znamená, že v tomto prípade vyberáme všetky elementy s triedou eee, ktoré sa nachádzajú inside odsekoch. Napríklad, tento selektor vyberie nasledujúce spany:

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

Výsledok vykonania kódu:

Takže ešte raz: p.eee - takýto selektor vyberá odseky s triedou eee. Ale ak urobím takto: p .eee, tak vyberiem všetky elementy s triedou eee, nachádzajúce sa inside odsekoch. Cíťte tento rozdiel.

Povedzte, čo vyberá selektor v uvedenom kóde nižšie. Potom napíšte HTML kód, ktorý sa hodí pod tento selektor. Tu je kód so selektorom:

p.bbb {
	color: red;
}

Povedzte, čo vyberá selektor v uvedenom kóde nižšie. Potom napíšte HTML kód, ktorý sa hodí pod tento selektor. Tu je kód so selektorom:

p .bbb {
	color: red;
}

Povedzte, čo vyberá selektor v uvedenom kóde nižšie. Potom napíšte HTML kód, ktorý sa hodí pod tento selektor. Tu je kód so selektorom:

.eee p.bbb {
	color: red;
}

Povedzte, čo vyberá selektor v uvedenom kóde nižšie. Potom napíšte HTML kód, ktorý sa hodí pod tento selektor. Tu je kód so selektorom:

.eee p .bbb {
	color: red;
}