Грешка на почетниците во селекторот на потомци

Погледнете го следниов селектор:

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