Kezdők gyakori hibája az utód szelektorban

Nézd meg a következő szelektort:

p.eee {
	color: red;
}

Már tudnod kell, hogy ez a szelektor kiválasztja az eee osztállyal rendelkező bekezdéseket. Például ezeket:

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

Most nézd meg ezt a szelektort:

p .eee {
	color: green;
}

Ez a szelektor abban különbözik az előzőtől, hogy a tag neve és az osztály neve között szóköz található. Ez a szóköz az utód szelektort jelenti. Vagyis ebben az esetben minden olyan elemet kiválasztunk, amelynek eee osztálya van, és amely a bekezdéseken *belül* található. Például ez a szelektor a következő span elemeket választja ki:

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

A kód végrehajtásának eredménye:

Tehát még egyszer: a p.eee szelektor az eee osztállyal rendelkező bekezdéseket választja ki. De ha így csinálom: p .eee, akkor minden olyan elemet kiválasztok, amelynek eee osztálya van, és amely a bekezdéseken *belül* található. Érezd át ezt a különbséget.

Magyarázd el, mit választ ki a szelektor az alábbi kódban. Majd írj HTML kódot, amely megfelel ennek a szelektornak. Itt a kód a szelektorral:

p.bbb {
	color: red;
}

Magyarázd el, mit választ ki a szelektor az alábbi kódban. Majd írj HTML kódot, amely megfelel ennek a szelektornak. Itt a kód a szelektorral:

p .bbb {
	color: red;
}

Magyarázd el, mit választ ki a szelektor az alábbi kódban. Majd írj HTML kódot, amely megfelel ennek a szelektornak. Itt a kód a szelektorral:

.eee p.bbb {
	color: red;
}

Magyarázd el, mit választ ki a szelektor az alábbi kódban. Majd írj HTML kódot, amely megfelel ennek a szelektornak. Itt a kód a szelektorral:

.eee p .bbb {
	color: red;
}