мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Несколько селекторов слитно

Чтобы выбрать элемент, одновременно подпадающий под несколько селекторов, нужно написать эти селекторы слитно, без пробела.

Например, следующий селектор выберет элемент, одновременно имеющий класс bbb и класс zzz:

.bbb.zzz { }

А следующий селектор выберет заголовок h2, одновременно имеющий класс bbb и класс zzz:

h2.bbb.zzz { }

Указанным образом можно конструировать произвольные конструкции селекторов. При этом их порядок используемых селекторов значения не имеет, кроме правила, что селекторы тегов нужно ставить в самом начале.

То есть, например, селекторы .bbb.zzz и .zzz.bbb полностью эквивалентны.

Кроме того, можно формировать селекторы с использованием id, например, такие: #elem.eee, или h2#elem.eee, или h2.eee#elem и так далее.

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

.bbb.zzz { color: red; }

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

h2.bbb.zzz { color: red; }

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

#elem.bbb { color: red; }

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

#elem.bbb.zzz { color: red; }

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

h2#elem.bbb { color: red; }

Ошибка новичков

Напоминаю, про ошибку новичков: селектор .bbb.zzz и селектор .bbb .zzz делают разные вещи. Первый ищет элемент, имеющий одновременно два класса, а второй - ищет элемент с классом zzz, находящийся внутри класса bbb.

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

h2.zzz { color: red; }

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

h2 .zzz { color: red; }

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

.bbb.zzz { color: red; }

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

.bbb .zzz { color: red; }

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

.bbb.zzz.xxx { color: red; }

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

.bbb .zzz.xxx { color: red; }

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

.bbb.zzz .xxx { color: red; }

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

.bbb .zzz .xxx { color: red; }

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

#elem.bbb { color: red; }

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

#elem .bbb { color: red; }