Nybörjarmisstag i avkommarselektorn

Titta på följande selektor:

p.eee {
	color: red;
}

Du borde redan veta att en sådan selektor kommer att välja ut stycken med klassen eee. Till exempel dessa:

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

Titta nu på den här selektorn:

p .eee {
	color: green;
}

Denna selektor skiljer sig från den föregående genom att det mellan taggnamnet och klassnamnet finns ett mellanslag. Detta mellanslag representerar en avkommarselektor. Det betyder att i det här fallet väljer vi alla element med klassen eee, som finns inuti stycken. Till exempel kommer denna selektor att välja följande spann:

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

Resultat av kodkörning:

Så, ännu en gång: p.eee - en sådan selektor väljer stycken med klassen eee. Men om jag gör så här: p .eee, så väljer jag alla element med klassen eee, som finns inuti stycken. Känn efter på denna skillnad.

Berätta vad selektorn väljer ut i koden nedan. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

p.bbb {
	color: red;
}

Berätta vad selektorn väljer ut i koden nedan. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

p .bbb {
	color: red;
}

Berätta vad selektorn väljer ut i koden nedan. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

.eee p.bbb {
	color: red;
}

Berätta vad selektorn väljer ut i koden nedan. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

.eee p .bbb {
	color: red;
}