Итак, у нас есть класс .form-123, в котором цифровая составляющая изменяется при загрузке или обновлении страницы. Можно ли установить единые CSS-свойства (например, margin или background-color) для классов такого типа.

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

Способ №1. Соответствие префикса

Воспользуемся CSS-селектором класса ˆ="form-", которые позволит выбрать все элементы, содержащие класс с префиксом form-:

[class^="form-"] {
  background: red;
  height: 100px;
  width: 100px;
  margin: 10px 0;
  display:block
}

Теперь для всех элементов HTML-документа:

будут установлены одинаковые CSS-свойства.

Способ №2. Совпадение значений

Здесь на помощь приходит другой CSS-селектор *="form-", который позоволит выбрать элементы, содержащие хотя бы одно вхождение искомой подстроки:

[class*="form-"] {
  background: red;
  height: 100px;
  width: 100px;
  margin: 10px 0;
  display:block
}

Способ №3. Дополнительный класс

А теперь, самый известный метод: создаем отделный класс с необходимыми CSS-свойствами:

.form-123 {
  background: blue;
  height: 100px;
  width: 100px;
  margin: 10px 0;
  display:block
}
.extra-class {
  background: blue !important;
}

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

В этом случае придется немного модифицировать HTML-документ:

Спасибо за внимание.