Как классы в css?

У меня между двумя селекторами был пробел, а классы на одной карточке.

Класс указывают в HTML без точки, а в CSS выбирают через точку.

Например, <article class="card selected">Товар</article> подходит под первые два селектора классов. Общие отступы задайте в .card, а выбранное состояние в .card.selected.

Порядок имен внутри атрибута class сам по себе не определяет победителя конфликтующих свойств. Для этого работает каскад CSS, включая специфичность и порядок правил.

В HTML запишите имя класса в атрибуте class без точки: <div class="card">Текст</div>. В CSS точка обозначает селектор класса: .card { padding: 1rem; }. Все подходящие элементы получат это правило, поэтому одинаковое оформление можно использовать много раз. Если одной карточке нужно выбранное состояние, добавьте второе имя: class="card selected", а правило задайте как .card.selected { border-color: teal; } при уже существующей рамке. Здесь отсутствие пробела между селекторами означает, что оба класса принадлежат одному элементу. Запись .card .selected имеет другой смысл: она ищет элемент selected среди потомков card. Именно лишний пробел часто объясняет, почему стиль не срабатывает. Несколько классов в HTML разделяют пробелами, а не запятыми. Точка в самом атрибуте стала бы частью имени и изменила бы нужный селектор, поэтому копировать ее из CSS туда не следует. Для имен выбирайте понятные обозначения роли или состояния и придерживайтесь одного написания. Не нужно давать каждому экземпляру карточки уникальный класс, если оформление общее. Отличайте классы от идентификатора id: класс рассчитан на повторное использование. Если на элемент подходят несколько правил, итог зависит от каскада, а не от того, какое имя поставили первым в class. При неожиданном результате откройте панель стилей выбранного элемента и посмотрите, совпал ли селектор и какое объявление перекрывает нужное свойство. Так легче найти ошибку, чем переименовывать все классы подряд.

Как раз ставил точку в class, теперь убрал.