тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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

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

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</i> </p> <p> lorem <span class="eee">ipsum</i> </p>

Результат выполнения кода:

Итак, еще раз: p.eee - такой селектор выбирает абзацы с классом eee. А вот если я сделаю так: p .eee, то выберу все элементы с классом test, находящиеся внутри абзацев. Прочувствуйте эту разницу.

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

p.bbb { color: red; }

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

p .bbb { color: red; }

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

.eee p.bbb { color: red; }

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

.eee p .bbb { color: red; }