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

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

cssp.eee {
  color: red;
}

Вече трябва да знаете, че такъв селектор ще избере абзаци с клас eee. Например, тези:

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

Сега погледнете този селектор:

cssp .eee {
  color: green;
}

Този селектор се различава от предишния по това, че между името на тага и името на класа има интервал. Този интервал представлява селектор за потомци. Тоест в този случай ние избираме всички елементи с клас eee, които се намират вътре в абзаци. Например, този селектор ще избере следните спенове:

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

Резултат от изпълнението на кода:

И така, още веднъж: p.eee - такъв селектор избира абзаци с клас eee. А ако направя така: p .eee, ще избера всички елементи с клас eee, намиращи се вътре в абзаци. Усетете тази разлика.

Задание 1

Разкажете какво избира селекторът в предоставения по-долу код. След това напишете HTML код, който отговаря на този селектор. Ето кода със селектора:

cssp.bbb {
  color: red;
}

Задание 2

cssp .bbb {
  color: red;
}

Задание 3

css.eee p.bbb {
  color: red;
}

Задание 4

css.eee p .bbb {
  color: red;
}