Složité kombinace selektorů potomků a tříd v CSS
Nyní předpokládejme, že máme následující kód:
<div class="block">
<h2 class="header">Nadpis h2</h2>
<p>
text
</p>
<h3 class="header">Nadpis h3</h3>
<p>
text
</p>
<p>
text
</p>
</div>
<div class="block">
<h2 class="header">Nadpis h2</h2>
<p>
text
</p>
<h3 class="header">Nadpis h3</h3>
<p>
text
</p>
<p>
text
</p>
</div>
Najděme všechny prvky s třídou header,
které se nacházejí uvnitř prvku s třídou block,
a nastavme jim písmo Arial:
.block .header {
font-family: Arial;
}
Jak je vidět v HTML kódu, uvnitř prvku s
třídou block mohou být prvky s třídou header
jak nadpisy h2, tak
i nadpisy h3. Napišme
selektory, které rozlišují tyto nadpisy, a něco
s těmito nadpisy udělejme.
Vyberme všechny h2 s třídou header,
které se nacházejí uvnitř prvku s třídou block:
.block h2.header {
font-size: 30px;
color: red;
}
A nyní vyberme všechny h3 s třídou
header, které se nacházejí uvnitř prvku
s třídou block:
.block h3.header {
font-size: 20px;
color: green;
}
Spojme celý náš CSS kód dohromady:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Aplikujme jej na náš HTML kód:
Vysvětlete, co vybírá selektor v uvedeném kódu. Poté napište HTML kód, který tomuto selektoru odpovídá. Zde je kód s selektorem:
.eee .bbb {
color: red;
}
Vysvětlete, co vybírá selektor v uvedeném kódu. Poté napište HTML kód, který tomuto selektoru odpovídá. Zde je kód s selektorem:
.eee h2 {
color: red;
}
Vysvětlete, co vybírá selektor v uvedeném kódu. Poté napište HTML kód, který tomuto selektoru odpovídá. Zde je kód s selektorem:
.eee h2.bbb {
color: red;
}
Vysvětlete, co vybírá selektor v uvedeném kódu. Poté napište HTML kód, který tomuto selektoru odpovídá. Zde je kód s selektorem:
.eee h3.bbb {
color: red;
}
Vysvětlete, co vybírá selektor v uvedeném kódu. Poté napište HTML kód, který tomuto selektoru odpovídá. Zde je kód s selektorem:
.eee p.bbb {
color: red;
}
Vysvětlete, co vybírá selektor v uvedeném kódu. Poté napište HTML kód, který tomuto selektoru odpovídá. Zde je kód s selektorem:
.eee .bbb .kkk {
color: red;
}
