Цепочки селекторов

Селекторы можно также соединять без пробела и запятой. Тогда элемент должен соответствовать им всем сразу:

div.group {
	color: purple;
}

Селектор div.group выбирает элементы, которые являются div и при этом имеют класс group. Элемент p с классом group выбран не будет, как и div без этого класса. Это называется цепочкой. Для вас это не новость: a[target="_blank"] и a:hover из предыдущих упражнений тоже цепочки селекторов.

Цепочки полезны по двум причинам. Во-первых, они выбирают элементы точнее, например только те группы, на которые наведён указатель: .group:hover. Во-вторых, селектор-цепочка побеждает каждую из своих частей. Сейчас у групп фон linen из правила для .group. Когда вы зададите им другой фон правилом для .group:hover, оно победит .group, поэтому при наведении фон изменится. Почему именно так, вы узнаете в упражнении о специфичности.

Не путайте: div.group (без пробела) — это не то же самое, что div .group (с пробелом), с которым вы познакомитесь в следующем упражнении, и не то же самое, что div, .group (с запятой), которое группирует селекторы.