Keerulised järeltulija valijate ja klasside kombinatsioonid CSS-is
Oletame nüüd, et meil on järgmine kood:
<div class="block">
<h2 class="header">Pealkiri h2</h2>
<p>
tekst
</p>
<h3 class="header">Pealkiri h3</h3>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
<div class="block">
<h2 class="header">Pealkiri h2</h2>
<p>
tekst
</p>
<h3 class="header">Pealkiri h3</h3>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
Leiame kõik klassiga header elemendid,
mis asuvad klassi block elemendi sees,
ja määrame neile fondi Arial:
.block .header {
font-family: Arial;
}
Nagu HTML-koodist näha, võivad klassi block
elemendi sees olevad klassiga header elemendid
olla nii pealkirjad h2 kui ka
pealkirjad h3. Kirjutame valijad,
mis eristavad neid pealkirju, ja teeme midagi
nende pealkirjadega.
Valime kõik klassiga header olevad h2,
mis asuvad klassi block elemendi sees:
.block h2.header {
font-size: 30px;
color: red;
}
Ja nüüd valime kõik klassiga
header olevad h3, mis asuvad klassi
block elemendi sees:
.block h3.header {
font-size: 20px;
color: green;
}
Paneme kogu oma CSS-i kokku:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Rakendame seda meie HTML-koodile:
Kirjelda, mida valib allpool toodud koodis olev valija. Seejärel kirjuta HTML-kood, mis sobib selle valijaga. Siin on valijaga kood:
.eee .bbb {
color: red;
}
Kirjelda, mida valib allpool toodud koodis olev valija. Seejärel kirjuta HTML-kood, mis sobib selle valijaga. Siin on valijaga kood:
.eee h2 {
color: red;
}
Kirjelda, mida valib allpool toodud koodis olev valija. Seejärel kirjuta HTML-kood, mis sobib selle valijaga. Siin on valijaga kood:
.eee h2.bbb {
color: red;
}
Kirjelda, mida valib allpool toodud koodis olev valija. Seejärel kirjuta HTML-kood, mis sobib selle valijaga. Siin on valijaga kood:
.eee h3.bbb {
color: red;
}
Kirjelda, mida valib allpool toodud koodis olev valija. Seejärel kirjuta HTML-kood, mis sobib selle valijaga. Siin on valijaga kood:
.eee p.bbb {
color: red;
}
Kirjelda, mida valib allpool toodud koodis olev valija. Seejärel kirjuta HTML-kood, mis sobib selle valijaga. Siin on valijaga kood:
.eee .bbb .kkk {
color: red;
}
