Кілька селекторів разом

Щоб вибрати елемент, який одночасно підпадає під кілька селекторів потрібно написати ці селектори разом, без пропуску.

Наприклад, наступний селектор вибере елемент, який одночасно має клас 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;
}

↑