Коротко: добавить элементу CSS-класс можно в разметке (class="имя"), из JavaScript (classList.add), в редакторе WordPress (поле «Дополнительный CSS-класс» у блока) или в шаблоне через функции WordPress. Классов может быть несколько — они перечисляются через пробел.
Вкладки: где добавить класс
<div class="card card--highlight">Текст</div>.card { padding: 16px; border-radius: 8px; }
.card--highlight { background: #f3f3f3; }Класс пишется в атрибуте class. В CSS он начинается с точки: .card.
const el = document.querySelector('.card');
el.classList.add('is-active'); // добавить
el.classList.remove('is-active'); // убрать
el.classList.toggle('is-open'); // переключить
el.className = 'card is-visible'; // заменить целикомТак класс добавляют по событию: клик, скролл, загрузка данных. Это основа интерактивности без фреймворков.
- Выделите блок в редакторе.
- Откройте панель блока → «Дополнительно».
- В поле «Дополнительный CSS-класс» впишите имя (
card--accent). - Сохраните и добавьте стиль в «Дополнительные стили».
Так оформляют отдельные блоки без правки шаблонов.
<button class="btn btn--primary btn--large">Купить</button>Несколько классов через пробел — это «композиция»: базовый класс плюс модификаторы. Удобно собирать варианты из готовых частей.
id — уникален. Для стилей используйте классы; id — для якорей и связок label/input.Как класс влияет на приоритет
Класс «сильнее» тега, но «слабее» id. Если стиль не применяется — возможно, его перебивает более конкретный селектор или инлайн-стиль.
| Селектор | Сила |
|---|---|
p |
слабая |
.card |
средняя |
#header |
высокая |
style="..." |
очень высокая |
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Стиль не применился | класса нет в HTML | добавить атрибут class |
| Класс есть, но стиля нет | опечатка или точка в HTML | исправить: точка только в CSS |
| Классы «слипаются» | нет пробела между ними | разделять пробелами |
| JS добавляет, но не работает | элемент не найден | проверить селектор и порядок загрузки |
Проверьте себя
Вопросы и ответы
Нет. Точка — часть синтаксиса CSS (.card). В HTML пишется только имя: class="card".
Сколько угодно. Практично держать 1–3: базовый и модификаторы.
В JS — перебрать элементы и вызвать classList.add у каждого. В HTML — прописать класс у каждого элемента.
Обычно в документации дизайн-системы: базовые компоненты и их модификаторы. Это помогает не плодить случайные имена.
Итоги
- Класс задаётся атрибутом
class, в CSS — с точкой. - Из JS классы меняют через
classList. - В WordPress у блока есть поле «Дополнительный CSS-класс».
- Несколько классов перечисляются через пробел; класс сильнее тега, слабее
id.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.