Komplexa kombinationer av avkomlingselektorer och klasser i CSS
Låt oss nu ha följande kod:
<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>
Låt oss hitta alla element med klassen header
som finns inom ett element med klassen block
och ställ in deras teckensnitt till Arial:
.block .header {
font-family: Arial;
}
Som syns i HTML-koden, inuti elementet med
klassen block kan element med klassen header
vara antingen rubriker h2 eller
rubriker h3. Låt oss skriva
selektorer som skiljer dessa rubriker åt och göra något
med dessa rubriker.
Låt oss välja alla h2 med klassen header
som finns inom ett element med klassen block:
.block h2.header {
font-size: 30px;
color: red;
}
Och låt oss nu välja alla h3 med klassen
header som finns inom ett element
med klassen block:
.block h3.header {
font-size: 20px;
color: green;
}
Låt oss samla all vår CSS tillsammans:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Låt oss tillämpa den på vår HTML-kod:
Beskriv vad selektorn väljer i koden nedan. Skriv sedan HTML-kod som passar under denna selektor. Här är koden med selektorn:
.eee .bbb {
color: red;
}
Beskriv vad selektorn väljer i koden nedan. Skriv sedan HTML-kod som passar under denna selektor. Här är koden med selektorn:
.eee h2 {
color: red;
}
Beskriv vad selektorn väljer i koden nedan. Skriv sedan HTML-kod som passar under denna selektor. Här är koden med selektorn:
.eee h2.bbb {
color: red;
}
Beskriv vad selektorn väljer i koden nedan. Skriv sedan HTML-kod som passar under denna selektor. Här är koden med selektorn:
.eee h3.bbb {
color: red;
}
Beskriv vad selektorn väljer i koden nedan. Skriv sedan HTML-kod som passar under denna selektor. Här är koden med selektorn:
.eee p.bbb {
color: red;
}
Beskriv vad selektorn väljer i koden nedan. Skriv sedan HTML-kod som passar under denna selektor. Här är koden med selektorn:
.eee .bbb .kkk {
color: red;
}
