Rookie Mistake in Descendant Selector

Look at the following selector:

p.eee {
	color: red;
}

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

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

Now look at this selector:

p .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:

<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.

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:

p.bbb {
	color: red;
}

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:

p .bbb {
	color: red;
}

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:

.eee p.bbb {
	color: red;
}

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:

.eee p .bbb {
	color: red;
}