Aloittelijan virhe jälkeläisvalitsimessa

Katso seuraavaa valitsinta:

p.eee {
	color: red;
}

Sinun pitäisi jo tietää, että tällainen valitsin valitsee kappaleet, joilla on luokka eee. Esimerkiksi nämä:

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

Katso nyt tätä valitsinta:

p .eee {
	color: green;
}

Tämä valitsin eroaa edellisestä siinä, että tagin nimen ja luokan nimen välissä on välilyönti. Tämä välilyönti edustaa jälkeläisvalitsinta. Tässä tapauksessa valitsemme kaikki eee-luokan omaavat elementit, jotka sijaitsevat kappaleiden sisällä. Esimerkiksi tämä valitsin valitsee seuraavat spanit:

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

Koodin suorituksen tulos:

Joten, vielä kerran: p.eee - tällainen valitsin valitsee kappaleet, joilla on luokka eee. Mutta jos teen näin: p .eee, niin valitsen kaikki eee-luokan omaavat elementit, jotka sijaitsevat kappaleiden sisällä. Tuntea ero.

Kerro, mitä alla olevan koodin valitsin valitsee. Kirjoita sitten HTML-koodi, joka sopii tähän valitsimeen. Tässä on koodi valitsimella:

p.bbb {
	color: red;
}

Kerro, mitä alla olevan koodin valitsin valitsee. Kirjoita sitten HTML-koodi, joka sopii tähän valitsimeen. Tässä on koodi valitsimella:

p .bbb {
	color: red;
}

Kerro, mitä alla olevan koodin valitsin valitsee. Kirjoita sitten HTML-koodi, joka sopii tähän valitsimeen. Tässä on koodi valitsimella:

.eee p.bbb {
	color: red;
}

Kerro, mitä alla olevan koodin valitsin valitsee. Kirjoita sitten HTML-koodi, joka sopii tähän valitsimeen. Tässä on koodi valitsimella:

.eee p .bbb {
	color: red;
}