Chyba začátečníků v selektoru potomků

Podívejte se na následující selektor:

p.eee {
	color: red;
}

Už byste měli vědět, že takový selektor vybere odstavce s třídou eee. Například tyto:

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

Podívejte se nyní na tento selektor:

p .eee {
	color: green;
}

Tento selektor se od předchozího liší tím, že mezi názvem tagu a názvem třídy je mezera. Tato mezera představuje selektor potomků. To znamená, že v tomto případě vybíráme všechny elementy s třídou eee, které se nacházejí uvnitř odstavců. Například tento selektor vybere následující spany:

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

Výsledek provedení kódu:

Takže ještě jednou: p.eee - takový selektor vybere odstavce s třídou eee. Ale pokud udělám toto: p .eee, vyberu všechny elementy s třídou eee, nacházející se uvnitř odstavců. Procítěte tento rozdíl.

Řekněte, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

p.bbb {
	color: red;
}

Řekněte, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

p .bbb {
	color: red;
}

Řekněte, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

.eee p.bbb {
	color: red;
}

Řekněte, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

.eee p .bbb {
	color: red;
}