Как добавить элементу css класс

CSS-класс — это «ярлык», который цепляется к HTML-элементу и позволяет стилизовать сразу группу похожих элементов. Добавить элементу класс можно статически в разметке, динамически через JavaScript, средствами PHP и в компонентных фреймворках. Ниже — все основные способы с примерами.

Что такое класс в CSS

Селектор класса в стилях начинается с точки: .box { }. В HTML класс задаётся атрибутом class:

<div class="box">Содержимое</div>

Один и тот же класс можно присвоить любому числу элементов — это и есть основа повторного использования стилей.

Добавление класса в HTML

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

<p class="text">Абзац</p>
<button class="btn btn-primary">Кнопка</button>

Обратите внимание: несколько классов перечисляются через пробел. Элемент получит стили и .btn, и .btn-primary.

Добавление класса через JavaScript

Динамически классы удобнее всего менять через classList:

const el = document.querySelector('.box');
el.classList.add('active');       // добавить
el.classList.remove('active');    // удалить
el.classList.toggle('active');    // переключить
el.classList.contains('active');  // проверить

Устаревший, но рабочий способ — свойство className:

el.className = 'box active';

Он опасен тем, что перезаписывает все существующие классы. classList надёжнее.

Добавление класса через jQuery

$('.box').addClass('active');
$('.box').removeClass('active');
$('.box').toggleClass('active');

Если проект использует jQuery, эти методы по-прежнему актуальны.

Добавление класса в WordPress и PHP

В PHP классы собирают строкой:

<div class="card <?php echo $is_featured ? 'featured' : ''; ?>">

В WordPress часто используют готовые функции, которые сами добавляют классы к <body> и записям:

<body <?php body_class(); ?>>

<article <?php post_class(); ?>>

А для добавления своих классов есть фильтры:

add_filter('body_class', function($classes) {
    $classes[] = 'custom-theme';
    return $classes;
});

Классы в React и Vue

В JSX используется атрибут className:

<div className={isActive ? 'box active' : 'box'}>...</div>

Во Vue — директива :class:

<div :class="{ active: isActive }">...</div>

Несколько классов и приоритет

Когда у элемента несколько классов, применяются правила из всех, а конфликты решаются по специфичности и порядку объявления. Пример:

.btn { background: #003f8f; }
.btn-primary { background: #992222; }
<!-- победит .btn-primary, если объявлен позже или специфичнее -->

Итоги

Класс добавляется атрибутом class в HTML, через classList в JavaScript, методами addClass в jQuery, строкой и фильтрами в PHP, через className и :class в React и Vue. Для динамики предпочитайте classList — он не затирает уже назначенные классы.