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

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

Группирование применяет один и тот же стиль сразу к нескольким селекторам. Это делается для удобства представления и сокращения кода CSS. Рассмотрим пример где стили прописаны для каждого селектора:

h1 { 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 160%; 
  color: #003; 
}

h2 { 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 135%; 
  color: #333; 
}

h3 { 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 120%; 
  color: #900;
} 

h4 { 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 150%; 
  color: #004;
} 

P {
  font-family: Times, serif;
}

Из данного примера видно, что стиль для тегов заголовков содержит одинаковое значение font-family. Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов. Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Синтаксис:

Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }

Сгруппировав селекторы наш первый пример будет выглядеть так:

h1, h2, h3, h4 { 
  font-family: Arial, Helvetica, sans-serif; 
} 

h1 { 
  font-size: 160%; 
  color: #003;
}

h2 { 
  font-size: 135%; 
  color: #333;
}

h3 { 
  font-size: 120%; 
  color: #900;
}

h4 { 
  font-size: 150%; 
  color: #004;
}

2023-11-18 00:50 Самоучитель по CSS