Komplekse kombinationer af afkom-vælger og klasser i CSS
Lad os nu antage, at vi har følgende kode:
<div class="block">
<h2 class="header">Titel h2</h2>
<p>
tekst
</p>
<h3 class="header">Titel h3</h3>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
<div class="block">
<h2 class="header">Titel h2</h2>
<p>
tekst
</p>
<h3 class="header">Titel h3</h3>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
Lad os finde alle elementer med klassen header,
der befinder sig inde i et element med klassen block,
og indstil deres skrifttype til Arial:
.block .header {
font-family: Arial;
}
Som det ses i HTML-koden, inde i elementet med
klassen block kan elementer med klassen header
være både overskrifter h2 og
overskrifter h3. Lad os skrive
vælgere, der skelner mellem disse overskrifter, og gøre noget
med disse overskrifter.
Lad os vælge alle h2 med klassen header,
der befinder sig inde i et element med klassen block:
.block h2.header {
font-size: 30px;
color: red;
}
Og lad os nu vælge alle h3 med klassen
header, der befinder sig inde i et element
med klassen block:
.block h3.header {
font-size: 20px;
color: green;
}
Lad os samle al vores CSS:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Lad os anvende det på vores HTML-kode:
Forklar, hvad vælgeren vælger i koden nedenfor. Derefter skriv HTML-koden, der passer til denne vælger. Her er koden med vælgeren:
.eee .bbb {
color: red;
}
Forklar, hvad vælgeren vælger i koden nedenfor. Derefter skriv HTML-koden, der passer til denne vælger. Her er koden med vælgeren:
.eee h2 {
color: red;
}
Forklar, hvad vælgeren vælger i koden nedenfor. Derefter skriv HTML-koden, der passer til denne vælger. Her er koden med vælgeren:
.eee h2.bbb {
color: red;
}
Forklar, hvad vælgeren vælger i koden nedenfor. Derefter skriv HTML-koden, der passer til denne vælger. Her er koden med vælgeren:
.eee h3.bbb {
color: red;
}
Forklar, hvad vælgeren vælger i koden nedenfor. Derefter skriv HTML-koden, der passer til denne vælger. Her er koden med vælgeren:
.eee p.bbb {
color: red;
}
Forklar, hvad vælgeren vælger i koden nedenfor. Derefter skriv HTML-koden, der passer til denne vælger. Her er koden med vælgeren:
.eee .bbb .kkk {
color: red;
}
