Поширена помилка новачків

Подивіться на наступний селектор:

p.eee {
	color: red;
}

Ви вже повинні знати, що такий селектор вибере абзаци з класом eee. Наприклад, ось ці:

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

Подивіться на наступний селектор:

p .eee {
	color: green;
}

Це селектор відрізняється від попереднього, що в нього між ім'ям тега та ім'ям класу стоїть пробіл. Цей пробіл являє собою селектор нащадків. Тобто в цьому випадку ми вибираємо всі елементи з класом eee, що знаходяться всередині абзаців. Наприклад, цей селектор вибере такі span-и:

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

Розкажіть, що вибирає селектор у наведеному нижче код. Потім напишіть HTML код, що підходить під цей селектор. Ось код із селектором:

p .bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee p .bbb {
	color: red;
}