⊗mkPmSlDSCC 61 of 250 menu

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; }
Čeština
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Používáme soubory cookie pro fungování webu, analýzu a personalizaci. Zpracování údajů probíhá v souladu s Zásadami ochrany osobních údajů.
přijmout vše přizpůsobit odmítnout