Aloittelijan virhe jälkeläisvalitsimessa

Katso seuraavaa valitsinta:

cssp.eee {
  color: red;
}

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

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

Katso nyt tätä valitsinta:

cssp .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:

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

Koodin suorituksen tulos:

cssp.bbb {
  color: red;
}

cssp .bbb {
  color: red;
}

css.eee p.bbb {
  color: red;
}

css.eee p .bbb {
  color: red;
}