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

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

Например, следующий селектор выберет элемент, одновременно имеющий класс `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; }`
←→
↑