Групування селекторів на CSS

Іноді може виникнути така ситуація: вам необхідно зробити одне й те саме з різними тегами, наприклад, пофарбувати всі заголовки 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;
}

Зауваження

Групувати через кому можна будь-яку кількість селекторів тегів, пробіл після коми не має значення, можна без нього, але з ним код красивіший.