Komplekse kombinasjoner av avstamningsselektor og klasser i CSS
La oss nå anta at vi har følgende kode:
<div class="block">
<h2 class="header">Tittel h2</h2>
<p>
tekst
</p>
<h3 class="header">Tittel h3</h3>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
<div class="block">
<h2 class="header">Tittel h2</h2>
<p>
tekst
</p>
<h3 class="header">Tittel h3</h3>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
La oss finne alle elementer med klassen header,
som befinner seg inni et element med klassen block,
og sette skrifttypen deres til Arial:
.block .header {
font-family: Arial;
}
Som man kan se i HTML-koden, inni et element med
klassen block kan elementer med klassen header
være både overskrifter h2 og
overskrifter h3. La oss skrive
selektorer som skiller disse overskriftene, og gjøre noe
med disse overskriftene.
La oss velge alle h2 med klassen header,
som befinner seg inni et element med klassen block:
.block h2.header {
font-size: 30px;
color: red;
}
Og la oss nå velge alle h3 med klassen
header, som befinner seg inni et element
med klassen block:
.block h3.header {
font-size: 20px;
color: green;
}
La oss sette sammen all vår CSS:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
La oss bruke den på vår HTML-kode:
Forklar hva selektoren i koden nedenfor velger. Skriv deretter HTML-kode som passer til denne selektoren. Her er koden med selektoren:
.eee .bbb {
color: red;
}
Forklar hva selektoren i koden nedenfor velger. Skriv deretter HTML-kode som passer til denne selektoren. Her er koden med selektoren:
.eee h2 {
color: red;
}
Forklar hva selektoren i koden nedenfor velger. Skriv deretter HTML-kode som passer til denne selektoren. Her er koden med selektoren:
.eee h2.bbb {
color: red;
}
Forklar hva selektoren i koden nedenfor velger. Skriv deretter HTML-kode som passer til denne selektoren. Her er koden med selektoren:
.eee h3.bbb {
color: red;
}
Forklar hva selektoren i koden nedenfor velger. Skriv deretter HTML-kode som passer til denne selektoren. Her er koden med selektoren:
.eee p.bbb {
color: red;
}
Forklar hva selektoren i koden nedenfor velger. Skriv deretter HTML-kode som passer til denne selektoren. Her er koden med selektoren:
.eee .bbb .kkk {
color: red;
}
