Kompleksne kombinacije selektora potomaka i klasa u CSS-u
Neka sada imamo sledeći kod:
<div class="block">
<h2 class="header">Naslov h2</h2>
<p>
tekst
</p>
<h3 class="header">Naslov h3</h3>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
<div class="block">
<h2 class="header">Naslov h2</h2>
<p>
tekst
</p>
<h3 class="header">Naslov h3</h3>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
Hajde da pronađemo sve elemente sa klasom header,
koji se nalaze unutar elementa sa klasom block,
i dodelimo im font Arial:
.block .header {
font-family: Arial;
}
Kao što se vidi u HTML kodu, unutar elementa sa
klasom block elementi sa klasom header
mogu biti i naslovi h2, i
naslovi h3. Hajde da napišemo
selektore koji razlikuju ove naslove, i nešto
uradimo sa tim naslovima.
Hajde da izaberemo sve h2 sa klasom header,
koji se nalaze unutar elementa sa klasom block:
.block h2.header {
font-size: 30px;
color: red;
}
A sada izaberimo sve h3 sa klasom
header, koji se nalaze unutar elementa
sa klasom block:
.block h3.header {
font-size: 20px;
color: green;
}
Hajde da sastavimo sav naš CSS zajedno:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Primenimo ga na naš HTML kod:
Objasnite, šta bira selektor u datom kodu ispod. Zatim napišite HTML kod, koji odgovara tom selektoru. Evo koda sa selektorom:
.eee .bbb {
color: red;
}
Objasnite, šta bira selektor u datom kodu ispod. Zatim napišite HTML kod, koji odgovara tom selektoru. Evo koda sa selektorom:
.eee h2 {
color: red;
}
Objasnite, šta bira selektor u datom kodu ispod. Zatim napišite HTML kod, koji odgovara tom selektoru. Evo koda sa selektorom:
.eee h2.bbb {
color: red;
}
Objasnite, šta bira selektor u datom kodu ispod. Zatim napišite HTML kod, koji odgovara tom selektoru. Evo koda sa selektorom:
.eee h3.bbb {
color: red;
}
Objasnite, šta bira selektor u datom kodu ispod. Zatim napišite HTML kod, koji odgovara tom selektoru. Evo koda sa selektorom:
.eee p.bbb {
color: red;
}
Objasnite, šta bira selektor u datom kodu ispod. Zatim napišite HTML kod, koji odgovara tom selektoru. Evo koda sa selektorom:
.eee .bbb .kkk {
color: red;
}
