Бошланғичларнинг селектор натижаларидаги хатолиги

Куйидаги селекторга қара:

p.eee {
	color: red;
}

Сиз билишингиз керакки, бундай селектор eee синифига эга бўлган абзацларни танлайди. Масалан, куйидагилар:

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

Энди куйидаги селекторга қара:

p .eee {
	color: green;
}

Бу селектор аввалгисидан фарқ қилади, чунки унда тег номи ва синф номи ўртасида бўшлиқ мавжуд. Ушбу бўшлиқ натижа селекторини ифодалайди. Яъни, бу ҳолда биз абзацлар ичида жойлашган eee синифига эга бўлган барча элементларни танлаймиз. Масалан, бу селектор куйидаги спенларни танлайди:

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

Коднинг ишлаши натижаси:

Шундай қилиб, яна бир бор: p.eee - бундай селектор eee синифига эга бўлган абзацларни танлайди. Аммо агар мен шундай қилсам: p .eee, у ҳолда абзацлар ичида жойлашган eee синифига эга бўлган барча элементларни танлайман. Бу фарқни яхши тушуниб олинг.

Куйидаги коддаги селектор нимани танлашини сўзлаб беринг. Сўнгра ушбу селекторга мос келадиган HTML кодни ёзинг. Селектор билан код:

p.bbb {
	color: red;
}

p .bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee p .bbb {
	color: red;
}