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