Представим, что у нас есть класс .form-123, в котором цифровая составляющая изменяется при загрузке или обновлении страницы. Можно ли установить единые CSS-свойства, такие как margin или background-color, для всех таких классов?
Спойлер: Да, это возможно! Есть целых три способа сделать это.
Способ №1: Соответствие префикса
Мы можем использовать CSS-селектор класса ^="form-", который позволяет выбрать все элементы, содержащие класс с префиксом form-:
[class^="form-"] {
background: red;
height: 100px;
width: 100px;
margin: 10px 0;
display: block;
}Теперь для всех элементов HTML-документа с классом, начинающимся на form-, будут установлены одинаковые CSS-свойства.
Пример:
<div class="form-123"></div>
<span class="form-124"></span>
<article class="form-125"></article>Способ №2: Совпадение значений
Здесь на помощь приходит другой CSS-селектор *="form-", который позволяет выбрать элементы, содержащие хотя бы одно вхождение искомой подстроки:
[class*="form-"] {
background: red;
height: 100px;
width: 100px;
margin: 10px 0;
display: block;
}Этот метод также применит указанные стили ко всем элементам, класс которых содержит подстроку form-.
Способ №3: Дополнительный класс
Самый известный метод: создаем отдельный класс с необходимыми CSS-свойствами и добавляем его к элементам:
.form-common {
background: blue;
height: 100px;
width: 100px;
margin: 10px 0;
display: block;
}Пример модифицированного HTML-документа:
<div class="form-123 form-common"></div>
<span class="form-124 form-common"></span>
<article class="form-125 form-common"></article>Использование класса .form-common обеспечивает применение общих стилей ко всем элементам с динамическими классами. При необходимости можно использовать !important, чтобы гарантировать приоритет этих стилей:
.form-common {
background: blue !important;
}Заключение
Установка единых CSS-свойств для динамических классов — это простая задача, если знать правильные методы. Вы можете использовать селекторы для соответствия префиксу или подстроке, либо добавить дополнительный класс. Все эти способы помогут вам эффективно управлять стилями для динамически изменяющихся классов.
