Begynders fejl i afkom-vælger

Se på følgende vælger:

p.eee {
	color: red;
}

Du burde allerede vide, at en sådan vælger vil vælge afsnit med klassen eee. For eksempel disse:

<p class="eee">
	lorem ipsum
</p>
<p class="eee">
	lorem ipsum
</p>

Se nu på denne vælger:

p .eee {
	color: green;
}

Denne vælger adskiller sig fra den forrige ved, at der mellem tag-navnet og klasse-navnet står et mellemrum. Dette mellemrum repræsenterer en afkom-vælger. Det betyder, at i dette tilfælde vælger vi alle elementer med klassen eee, der befinder sig inde i afsnit. For eksempel vil denne vælger vælge følgende span-elementer:

<p>
	lorem <span class="eee">ipsum</span>
</p>
<p>
	lorem <span class="eee">ipsum</span>
</p>

Resultat af kodeudførelse:

Så, igen: p.eee - en sådan vælger vælger afsnit med klassen eee. Men hvis jeg gør sådan her: p .eee, så vælger jeg alle elementer med klassen eee, der befinder sig inde i afsnit. Føl denne forskel.

Forklar, hvad vælgeren vælger i den nedenstående kode. Skriv derefter HTML-kode, der passer til denne vælger. Her er koden med vælgeren:

p.bbb {
	color: red;
}

Forklar, hvad vælgeren vælger i den nedenstående kode. Skriv derefter HTML-kode, der passer til denne vælger. Her er koden med vælgeren:

p .bbb {
	color: red;
}

Forklar, hvad vælgeren vælger i den nedenstående kode. Skriv derefter HTML-kode, der passer til denne vælger. Her er koden med vælgeren:

.eee p.bbb {
	color: red;
}

Forklar, hvad vælgeren vælger i den nedenstående kode. Skriv derefter HTML-kode, der passer til denne vælger. Her er koden med vælgeren:

.eee p .bbb {
	color: red;
}