class: несколько классов у одного элемента
Атрибут class объединяет элементы для оформления и позволяет назначить одному элементу несколько независимых признаков.
Назначение
Атрибут class объединяет элементы для оформления и позволяет назначить одному элементу несколько независимых признаков.
Как это работает
Имена разделяются пробельными символами. Селектор .card.featured требует оба класса на одном элементе, а .card .featured ищет потомка. Порядок имён в атрибуте не управляет приоритетом CSS.
Пример
<style>.card{padding:16px;margin:8px;border:2px solid #777}.card.featured{border-color:#11694e;background:#eaf4ee}</style>
<div class="card featured">Рекомендуемый материал</div><div class="card">Обычный материал</div>Что должно получиться
Обе карточки имеют одинаковые отступы. Дополнительный класс меняет только фон и цвет рамки первой карточки. Это сочетание правил, а не наследование классов как в языке программирования.
Граница применения и частая ошибка
Не дублируйте целиком оформление карточки для каждого состояния. Общие свойства оставьте в базовом классе, а модификатору передайте только различия.
Самостоятельная проверка
Удалите featured у первой карточки и добавьте его второй. Рамка должна поменяться местами без изменения общей формы блоков; перестановка имён классов не должна влиять на результат.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.