Чтобы выбрать элемент, одновременно подпадающий под несколько селекторов, нужно написать эти селекторы слитно, без пробела.
Например, следующий селектор выберет элемент, одновременно имеющий класс 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;
}