Атрибут class даёт элементу одно или несколько названий: <p class="note">. По этим названиям элемент находят в CSS и JavaScript, чтобы применить общий стиль или общее поведение сразу к группе элементов. В отличие от id, с одним class может быть связано сколько угодно элементов, а у одного элемента может быть сразу несколько классов.
<p class="note">Важная заметка</p>
<p class="note editorial">Эту мысль нужно переписать</p>В этой статье
- Атрибут class в HTML: что это и на каких тегах работает
- Значение атрибута class: как записать
- Несколько классов в атрибуте class
- Порядок классов в атрибуте не важен
- Атрибут class в CSS
- Атрибут class и id: что выбрать
- Атрибут class в JavaScript
- Как называть классы
- Частые ошибки с атрибутом class
- Шпаргалка по атрибуту class
Атрибут class в HTML: что это и на каких тегах работает
Атрибут class входит в глобальные атрибуты и действует на любом HTML-теге. Его задача - объединить элементы в группу, у которой общее оформление или общее поведение в скрипте. В примере выше оба абзаца получают стиль .note, а второй ещё и .editorial. Общие правила записи атрибутов разобраны в уроке Теги, атрибуты и вложенность.
Значение атрибута class: как записать
Название класса записывают без пробела внутри, регистр различается, латиница рекомендуется. Но у class есть отличия от id: повтор на странице допускается, а пустое значение не считается ошибкой.
Пример: какое название класса можно записать
Выберите название и посмотрите, можно ли так записать class. Верхняя строка показывает, как значение выглядит в теге.
Несколько классов в атрибуте class
Несколько классов у одного элемента записывают через пробел: class="card dark". Каждое название - самостоятельный класс, элемент получает стили от обоих сразу.
Пример: как класс складывается из нескольких названий
Включайте и выключайте классы галочками. Карточка меняется, а строка атрибута под ней показывает, из каких названий сейчас состоит class.
Порядок классов в атрибуте не важен
Для браузера порядок названий внутри class не имеет значения: class="card dark" и class="dark card" - один и тот же набор классов. Итоговый вид элемента решают порядок и вес правил в CSS.
Пример: два блока с одними классами в разном порядке
У обоих блоков классы card и dark, просто записаны в разном порядке. Выглядят одинаково.
Порядок важен только для особых CSS-селекторов, которые читают буквальное начало строки значения, например [class^="card"]. Такие селекторы на сайте почти не применяются, поэтому на практике порядок классов можно выбирать свободно.
Атрибут class в CSS
В CSS перед названием класса пишут точку: .note. Чтобы выбрать элемент сразу с двумя классами, точки ставят подряд без пробела: .note.editorial. Пробел между классами в селекторе означает другое - поиск внутри вложенности, это разобрано в уроке Селекторы типа, класса и id.
.note {
font-style: italic;
}
.note.editorial {
background: #fdecea;
}Атрибут class и id: что выбрать
Класс подходит для группы элементов с общим стилем, id - для одного элемента, на который ссылаются по названию. Даже для одного элемента оформление чаще задают классом: у него меньший вес, и правило проще переопределить. id нужен, когда на элемент ссылаются или связывают его с другим тегом. Подробное сравнение - в разделе Атрибуты id и class (и name): чем отличаются.
Атрибут class в JavaScript
В JavaScript у каждого элемента есть свойство classList с методами add, remove и toggle. Метод toggle добавляет класс, если его не было, и убирает, если он уже есть - удобно для переключателей.
const card = document.querySelector(".card");
card.classList.add("dark"); // добавить класс
card.classList.remove("dark"); // убрать класс
card.classList.toggle("dark"); // переключить классПример: переключение класса кнопкой
Кнопка вызывает classList.toggle("dark") у карточки. Класс то появляется в атрибуте, то пропадает.
Как называть классы
Стандарт не ограничивает названия классов, выбор остаётся за автором страницы. Удобнее называть класс по смыслу элемента, а не по тому, как он сейчас выглядит: смысл не меняется, даже если потом поменяется оформление.
| Плохое название | Удачное название | Почему |
|---|---|---|
| red | warning | Цвет можно изменить, а смысл «предупреждение» останется прежним |
| big-text | lead | Название лучше описывает роль текста, а не размер шрифта |
| card1, card2 | card product, card service | Класс отвечает на вопрос «что это», а не «какой по счёту» |
| leftBlock | side-menu | Слова разделяют дефисом, а не регистром букв: так принято в CSS. Название описывает роль, а не положение |
Частые ошибки с атрибутом class
Чаще всего ошибаются с разделителем между классами, точкой в значении и записью класса из скрипта.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
class="card,dark" с запятой | Браузер видит один класс с запятой внутри названия, стили не применяются | Разделять классы пробелом: class="card dark" |
class=" card dark " с лишними пробелами | Не ошибка: лишние пробелы браузер убирает сам, классы те же | Писать можно и с одним пробелом, для чтения это удобнее |
class=".card" с точкой внутри значения | Класс элемента получает буквальную точку в названии, селектор .card его не находит | Точку прописывать только в CSS-селекторе, не в самом атрибуте |
| Один общий класс на весь блок вместо нескольких | Нельзя включить и выключить часть оформления отдельно | Разбить стиль на классы по смыслу: card, dark, featured |
className = "card" вместо classList.add | Старое значение class стирается целиком, прежние классы пропадают | Для добавления одного класса использовать classList.add |
Шпаргалка по атрибуту class
| Правило | Что запомнить |
|---|---|
| Где работает | На любом теге |
| Классов у элемента | Сколько угодно |
| Повторы на странице | Допускаются |
| Разделитель классов | Пробел |
| Порядок классов | Не важен для браузера |
| Регистр | Различается |
| Селектор в CSS | .название, два класса подряд .a.b |
| Добавить класс в JS | classList.add("название") |
| Убрать класс в JS | classList.remove("название") |
| Переключить класс в JS | classList.toggle("название") |
