# Распространенная ошибка новичков

Посмотрите на следующий селектор:

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

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

`p .bbb { color: red; }`

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

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

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

`.eee p .bbb { color: red; }`
←→
↑