Napaka začetnikov pri selektorju potomcev

Poglejte naslednji selektor:

cssp.eee {
  color: red;
}

Že morate vedeti, da bo takšen selektor izbral odstavke z razredom eee. Na primer, te:

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

Zdaj poglejte tale selektor:

cssp .eee {
  color: green;
}

Ta selektor se od prejšnjega razlikuje po tem, da je med imenom oznake in imenom razreda presledek. Ta presledek predstavlja selektor potomcev. To pomeni, da v tem primeru izbiramo vse elemente z razredom eee, ki se nahajajo znotraj odstavkov. Na primer, ta selektor bo izbral naslednje elemente span:

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

Rezultat izvajanja kode:

Torej, še enkrat: p.eee - takšen selektor izbere odstavke z razredom eee. Če pa naredim takole: p .eee, potem izberem vse elemente z razredom eee, ki se nahajajo znotraj odstavkov. Razliko dobro razumite.

Задание 1

Povejte, kaj izbere selektor v spodnji kodi. Nato napišite HTML kodo, ki ustreza temu selektorju. Tu je koda s selektorjem:

cssp.bbb {
  color: red;
}
Задание 2

Povejte, kaj izbere selektor v spodnji kodi. Nato napišite HTML kodo, ki ustreza temu selektorju. Tu je koda s selektorjem:

cssp .bbb {
  color: red;
}
Задание 3

Povejte, kaj izbere selektor v spodnji kodi. Nato napišite HTML kodo, ki ustreza temu selektorju. Tu je koda s selektorjem:

css.eee p.bbb {
  color: red;
}
Задание 4

Povejte, kaj izbere selektor v spodnji kodi. Nato napišite HTML kodo, ki ustreza temu selektorju. Tu je koda s selektorjem:

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