Справочник HTML & CSS

.class

Выбирает элементы, у которых в атрибуте `class` есть указанный класс.

Синтаксис

.name { … }

Параметры

Параметр	Тип	Описание
.name	class	Элементы с классом `name`.
.a.b	classes	Элементы, у которых есть оба класса сразу (без пробела между ними).

Примеры

У элемента может быть несколько классов, и каждый добавляет свои стили:

<style>
  .note { padding: 8px; background: lightyellow; }
  .warning { background: mistyrose; }
</style>
 
<p class="note">A note.</p>
<p class="note warning">A note that is also a warning.</p>

Два класса, записанные слитно, подходят только элементам с обоими классами:

<style>
  .btn { padding: 6px 12px; border: 1px solid gray; }
  .btn.primary { background: royalblue; color: white; }
</style>
 
<button class="btn">Cancel</button>
<button class="btn primary">Save</button>

Примечания

Классы — основной инструмент оформления: их можно повторять на любых элементах, и специфичность у них умеренная. Называйте класс по смыслу (card, price), а не по виду (red-text).

См. также

#id — Выбирает единственный элемент с указанным атрибутом `id`.
tag — Селектор по тегу выбирает все элементы с этим тегом, универсальный селектор `*` — вообще все элементы.
class — Один или несколько классов элемента — основной способ обратиться к нему из CSS.

В учебнике

Селекторы — Как выбрать элементы для оформления — по тегу, классу, id, вложенности и атрибуту.

Спасибо, что читаете!