Иногда может возникнуть следующая ситуация:
вам нужно сделать одно и то же с разными
тегами, например, покрасить все заголовки
h2, h3 и абзацы в красный цвет.
В этом случае вам придется написать что-то
вроде такого:
h2 {
color: red;
}
h3 {
color: red;
}
p {
color: red;
}
Однако, существует способ сделать это немного короче: селекторы тегов можно объединять через запятую и CSS код применится к ним всем одновременно. Приведенный выше код можно переписать покороче таким образом:
h2, h3, p {
color: red;
}
Упростите код, используя группировку селекторов:
h1 {
text-align: center;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
Общие свойства
Бывает такое, что часть свойств некоторых селекторов одинакова, а часть - отличается. В следующем коде, например, заголовки и абзац имеют красный цвет, но у абзаца кроме этого есть еще свойства:
h2 {
color: red;
}
h3 {
color: red;
}
p {
color: red;
text-align: justify;
font-size: 16px;
}
В таком случае можно сгруппировать повторяющиеся части, а то, что не повторяется, записать отдельно:
h2, h3, p {
color: red;
}
p {
text-align: justify;
font-size: 16px;
}
Упростите код, используя группировку селекторов:
h1 {
text-align: center;
}
h2 {
text-align: center;
color: blue;
}
h3 {
text-align: center;
font-size: 16px;
color: red;
}
Упростите код, используя группировку селекторов:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
h3 {
text-align: center;
font-size: 16px;
color: red;
}
Замечания
Группировать через запятую можно любое количество селекторов тегов, пробел после запятой не имеет значения, можно без него, но с ним код более красивый.