Няколко селектора заедно в CSS

За да изберете елемент, който отговаря едновременно на няколко селектора, трябва да напишете тези селектори заедно, без интервал.

Например, следният селектор ще избере елемент, който има едновременно клас bbb и клас zzz:

css.bbb.zzz {
  
}

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

cssh2.bbb.zzz {
  
}

По посочения начин могат да се конструират произволни конструкции от селектори. При това редът на използваните селектори няма значение, освен правилото, че селекторите за тагове трябва да се поставят в самото начало.

Тоест, например, селекторите .bbb.zzz и .zzz.bbb са напълно еквивалентни.

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

Задание 1

Разкажете какво избира селекторът в дадения по-долу код. След това напишете HTML код, който отговаря на този селектор. Ето кода със селектора:

css.bbb.zzz {
  color: red;
}
Задание 2

Разкажете какво избира селекторът в дадения по-долу код. След това напишете HTML код, който отговаря на този селектор. Ето кода със селектора:

cssh2.bbb.zzz {
  color: red;
}
Задание 3

Разкажете какво избира селекторът в дадения по-долу код. След това напишете HTML код, който отговаря на този селектор. Ето кода със селектора:

css#elem.bbb {
  color: red;
}
Задание 4

Разкажете какво избира селекторът в дадения по-долу код. След това напишете HTML код, който отговаря на този селектор. Ето кода със селектора:

css#elem.bbb.zzz {
  color: red;
}
Задание 5

Разкажете какво избира селекторът в дадения по-долу код. След това напишете HTML код, който отговаря на този селектор. Ето кода със селектора:

cssh2#elem.bbb {
  color: red;
}