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

Группировка селекторов позволяет применить один набор стилей к нескольким элементам через запятую; нативная вложенность (CSS Nesting) позволяет писать вложенные правила прямо в CSS без препроцессора.

Зачем нужно

Группировка сокращает дублирование: вместо одинаковых правил для трёх селекторов — одно правило через запятую. Вложенность (поддерживается с 2023 в современных браузерах) убирает необходимость в SCSS/LESS для организации стилей компонентов.

Где используется

  • Группировка типографических базовых стилей (h1, h2, h3)
  • Вложенность состояний компонента (:hover, :focus, ::before)
  • Медиазапросы внутри компонента
  • Стилизация вариаций БЭМ-блока

Группировка через запятую

/* Без группировки — дублирование */
h1 { color: #333; font-weight: 700; }
h2 { color: #333; font-weight: 700; }
h3 { color: #333; font-weight: 700; }

/* С группировкой */
h1, h2, h3 {
  color: #333;
  font-weight: 700;
}

/* Группировка классов */
.btn-primary,
.btn-secondary,
.btn-danger {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

CSS Nesting (нативная вложенность)

Поддерживается в Chrome 112+, Firefox 117+, Safari 16.5+.

/* Без вложенности */
.card { padding: 16px; }
.card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.card .card__title { font-size: 1.25rem; }
.card .card__btn { margin-top: auto; }

/* С нативной вложенностью */
.card {
  padding: 16px;

  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .card__title {
    font-size: 1.25rem;
  }

  .card__btn {
    margin-top: auto;
  }
}

Вложенные медиазапросы

.nav {
  display: flex;
  flex-direction: row;

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

Вложенность псевдоэлементов

.link {
  color: blue;

  &:hover {
    color: darkblue;
  }

  &::before {
    content: "→ ";
  }

  &:visited {
    color: purple;
  }
}

Частые ошибки

  1. Слишком глубокая вложенность — больше 3-4 уровней создаёт высокую специфичность и ухудшает читаемость.
  2. Запятая в :is vs группировка — если один селектор в группе невалиден, вся группа игнорируется; :is(h1, invalid-tag, h3) работает через forgiving-парсинг.
  3. Нет & в нативном CSS — в отличие от SCSS, в нативном CSS вложенный селектор без & работает иначе; всегда используйте & для явности.

Связанные темы

Ресурсы