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;
}