Zložité kombinácie selektora potomkov a tried v CSS
Povedzme, že teraz máme nasledujúci kód:
<div class="block">
<h2 class="header">Title h2</h2>
<p>
text
</p>
<h3 class="header">Title h3</h3>
<p>
text
</p>
<p>
text
</p>
</div>
<div class="block">
<h2 class="header">Title h2</h2>
<p>
text
</p>
<h3 class="header">Title h3</h3>
<p>
text
</p>
<p>
text
</p>
</div>
Nájdime všetky prvky s triedou header,
ktoré sa nachádzajú vo vnútri prvku s triedou block,
a nastavme im písmo Arial:
.block .header {
font-family: Arial;
}
Ako vidno v HTML kóde, vo vnútri prvku s
triedou block môžu byť prvky s triedou header
ako nadpisy h2, tak aj nadpisy h3. Napíšme
selektory, ktoré rozlíšia tieto nadpisy, a niečo
urobme s týmito nadpismi.
Vyberme všetky h2 s triedou header,
ktoré sa nachádzajú vo vnútri prvku s triedou block:
.block h2.header {
font-size: 30px;
color: red;
}
A teraz vyberme všetky h3 s triedou
header, ktoré sa nachádzajú vo vnútri prvku
s triedou block:
.block h3.header {
font-size: 20px;
color: green;
}
Poďme zhromaždiť celý náš CSS kód spolu:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Aplikujme ho na náš HTML kód:
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 .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 h2 {
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 h2.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 h3.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 .bbb .kkk {
color: red;
}
