Если несколько разных селекторов должны получить одинаковые стили, их можно перечислить через запятую в одном правиле, вместо того чтобы повторять один и тот же набор свойств несколько раз. А если стиль нужен вообще всем элементам без исключения, есть отдельный универсальный селектор - звёздочка.
Попробуй прямо в этом окне: убери запятые между h1, h2, h3, оставив только пробелы, и посмотри, что произойдёт с цветом - все три заголовка вернутся к чёрному. А если удалить блок с звёздочкой целиком, у всех элементов, включая абзац, снова появится стандартный отступ браузера сверху.
Группировка селекторов через запятую
Чтобы применить один и тот же набор стилей к нескольким разным селекторам, их перечисляют через запятую в одном правиле - в спецификации CSS это называется списком селекторов. Каждый селектор в списке работает независимо от остальных: они просто делят между собой одни и те же фигурные скобки, а не должны быть как-то вложены друг в друга.
h1, h2, h3 { color: tomato; } - один блок стилей сразу для трёх разных заголовков, вместо трёх отдельных правил.
h1 h2 h3 { color: tomato; } - забыли запятые, остались только пробелы. Это уже совсем другой селектор: он ищет <h3> внутри <h2> внутри <h1> - то есть три вложенных друг в друга тега, а не три соседних заголовка. Если на странице такой вложенности нет, правило не найдёт вообще ничего.
Универсальный селектор *
Звёздочка - это универсальный селектор: он выбирает вообще все элементы на странице, независимо от тега, класса или id. Чаще всего его используют не для оформления, а для сброса - убрать разные стандартные отступы и рамки, которые браузеры сами по себе ставят разным тегам, и начать оформление с чистого листа.
* { margin: 0; padding: 0; } - убирает стандартные отступы браузера сразу у всех элементов.
*.warning { color: red; } - звёздочка перед классом ничего не меняет: *.warning и просто .warning работают совершенно одинаково, звёздочка здесь лишняя.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Забыть запятую между селекторами (h1 h2 h3 вместо h1, h2, h3) | Это уже не группировка, а селектор для вложенных друг в друга тегов - часто не находит на странице вообще ничего | Всегда разделять перечисляемые селекторы запятой |
| Думать, что селекторы через запятую как-то связаны между собой | На самом деле это независимый список - каждый селектор ищет свои элементы сам по себе, они не обязаны быть вложены друг в друга | Не путать список через запятую с комбинаторами - о них будет отдельный урок |
| Писать *.warning или *#id, думая что звёздочка что-то усиливает | Звёздочка перед классом или id ничего не меняет - .warning и *.warning работают одинаково | Убирать лишнюю звёздочку, она здесь не нужна |
| Использовать * не для сброса отступов, а для основного оформления конкретных блоков | Универсальный селектор задевает буквально всё на странице, включая элементы, о которых заранее не подумали, и потом приходится переопределять его точечными правилами | Применять * для сброса общих отступов и box-sizing, а не для оформления конкретных элементов |
Шпаргалка
| Термин | Значение |
|---|---|
| Группировка селекторов | Несколько селекторов через запятую в одном правиле, например h1, h2 { } |
| Список селекторов | Официальное название группировки в спецификации CSS |
| Универсальный селектор | Звёздочка * - выбирает вообще все элементы на странице |
| CSS reset | Частое применение * - например * { margin: 0; padding: 0; } для сброса стандартных отступов браузера |
| *.class | Лишняя запись - полностью равнозначна .class без звёздочки |
Коротко: отвечаем на вопросы
Можно ли группировать больше двух-трёх селекторов?
Да, ограничений нет - через запятую можно перечислить сколько угодно селекторов, все они получат один и тот же набор стилей.
Можно ли применить универсальный селектор только внутри одного блока, а не ко всей странице?
Да, звёздочку можно сочетать с другими селекторами - например, div * выберет все элементы внутри любого div, а не вообще все элементы страницы.
Есть ли разница между h1, h2 { } и двумя отдельными правилами h1 { } и h2 { }?
По результату - никакой, браузер применит стили одинаково в обоих случаях. Группировка через запятую - это просто более короткая запись, чтобы не повторять одинаковые свойства дважды.
Правда ли, что универсальный селектор * замедляет загрузку страницы?
Для обычного сайта с типичным объёмом CSS это не тот эффект, который реально заметен - современные браузеры справляются с таким селектором без проблем. Гораздо важнее не злоупотреблять * для точечного оформления, о чём говорилось выше.
