Rookie Mistake in Descendant Selector

Look at the following selector:

cssp.eee {
  color: red;
}

You should already know that this selector will select paragraphs with the class eee. For example, these:

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

Now look at this selector:

cssp .eee {
  color: green;
}

This selector differs from the previous one in that it has a space between the tag name and the class name. This space is a descendant selector. So in this case, we select all elements with the class eee that are inside paragraphs. For example, this selector will select the following spans:

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

Result of code execution:

So, once again: p.eee - this selector selects paragraphs with the class eee. But if I do this: p .eee, then I will select all elements with the class eee, located inside paragraphs. Feel this difference.

Задание 1

Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:

cssp.bbb {
  color: red;
}

Задание 2

Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:

cssp .bbb {
  color: red;
}

Задание 3

Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:

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

Задание 4

Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:

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