тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Группировка сложных селекторов

Пусть у нас есть два следующих селектора:

.block h2 { color: red; } .block h3 { color: red; }

Так как эти селекторы делают одно и тоже их можно сгруппировать через запятую:

.block h2, .block h3 { color: red; }

Ошибка новичков

Все, что разделено запятой при группировке, должно представлять собой полноценный селектор. Давайте посмотрим, где здесь можно ошибиться.

Пусть у нас есть вот такой код:

#block h2 { color: red; } #block h3 { color: red; }

Давайте сгруппируем два селектора в один. Вот правильный вариант группировки:

#block h2, #block h3 { color: red; }

А вот неправильный вариант группировки:

#block h2, h3 { color: red; }

В этом неправильном варианте группировки новичкам почему-то кажется, что #block относится и к h2, и к h3, стоящему после запятой. Но селекторы не действуют через запятую и фактически этот неправильный вариант группировки можно переписать вот так:

#block h2 { color: red; } h3 { color: red; }

Сравните с изначальным вариантом, который мы начали сокращать:

#block h2 { color: red; } #block h3 { color: red; }

Практические задачи

Упростите код, используя группировку селекторов:

#block h1 { text-align: center; } #block h2 { text-align: center; }

Упростите код, используя группировку селекторов:

#block h1 { text-align: center; font-size: 30px; } #block h2 { text-align: center; font-size: 20px; }

Упростите код, используя группировку селекторов:

#block h1 { text-align: center; } #block h2 { text-align: center; color: blue; } #block h3 { text-align: center; font-size: 16px; color: red; }

Упростите код, используя группировку селекторов:

#block h1.eee { text-align: center; font-size: 30px; } #block h2.zzz { text-align: center; font-size: 20px; }

Упростите код, используя группировку селекторов:

.xxx .kkk { text-align: center; } .eee h2.zzz { text-align: center; } #eee h2 { text-align: center; }

Упростите код, используя группировку селекторов:

.eee h2.zzz { text-align: center; } .xxx { text-align: center; }