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;
}