Исполняемые доки CSS: Селектор класса

Q: Как выбрать класс в CSS?

Напишите точку и имя класса: .card { ... } оформляет каждый элемент с class="card". Точка пишется только в CSS; в HTML-атрибуте ее нет.

Q: Как дать элементу два класса?

Разделите имена пробелом в одном атрибуте: class="btn primary". Два атрибута class на элементе не работают; браузер оставляет только первый.

Q: Как выбрать элемент, у которого два класса?

Соедините селекторы классов без пробела: .btn.primary выбирает элементы, у которых есть оба класса. С пробелом .btn .primary означает элемент .primary внутри элемента .btn.

Селектор класса и селектор ID в CSS (.class и #id)

Селектор класса (.name) оформляет все элементы с этим классом, селектор ID (#name) один элемент с этим id. Разберем синтаксис, несколько классов и их цепочки, разницу между class и id, правила именования и переключение классов через JavaScript.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Селектор класса

Селектор класса это точка и имя класса. Он оформляет все элементы, в атрибуте class которых есть это имя, независимо от типа элемента.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

Точка есть только в CSS. В HTML атрибут записывается как class="badge", без точки. Регистр в именах классов важен: .Badge не совпадает с class="badge".

Несколько классов у одного элемента

У элемента может быть сколько угодно классов через пробел. Каждый приносит свои правила, и так из маленьких частей собираются варианты:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

.btn.danger, без пробела, выбирает элементы, у которых есть оба класса. У последнего span есть danger, но нет btn, поэтому правило с цепочкой его пропускает.

Варианты селектора класса

Селектор	Выбирает
`.note`	Любой элемент с классом `note`
`p.note`	Только элементы `<p>` с классом `note`
`.btn.primary`	Элементы, у которых есть и `btn`, и `primary`
`.card .title`	`.title` где угодно внутри `.card`
`.card > .title`	`.title`, родитель которого `.card`
`.a, .b`	Элементы с `a` или `b`

Разница между пробелом и его отсутствием вместе с другими комбинаторами разобрана на странице про селекторы CSS.

Селектор ID

Селектор ID это решетка и id: #site-header оформляет элемент с id="site-header". Id должен быть уникальным на странице, поэтому селектор ID выбирает ровно один элемент.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

Id нужны не только для стилей: href="#details" прокручивает к элементу, <label for="email"> указывает на id поля ввода, а JavaScript находит элемент через document.getElementById('details'). Обычно id дают элементу именно поэтому; для оформления класс подходит лучше.

Класс или ID

	Класс `.name`	ID `#name`
На странице	Много элементов	Один элемент
У элемента	Несколько, через пробел	Один
Специфичность	(0,1,0)	(1,0,0)
Цель ссылки (`#name` в URL)	Нет	Да
Лучше всего для	Оформления	Якорей, label, привязки JavaScript

Разница в специфичности и есть практическая причина оформлять через классы. Один ID сильнее любого числа классов, поэтому правило с ID можно перебить только другим ID, встроенным стилем или !important:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

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

Классы это обычный способ для JavaScript изменить внешний вид: CSS описывает состояния, а скрипт только переключает их.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

У classList есть также add, remove, contains и replace. Не присваивайте className напрямую: это заменяет все классы, которые были у элемента.

Как называть классы

Буквы, цифры, дефисы и подчеркивания безопасны: card, card-title, card__title, is-open.
Не начинайте селектор с цифры или с дефиса и цифры. .2col невалиден в CSS. Начинайте с буквы (.cols-2) или экранируйте цифру (.\32 col).
Называйте по назначению, а не по виду: .error переживет редизайн, .red-text нет.
В больших проектах помогает соглашение об именах. BEM записывает block__element--modifier, например .card__title--large.

Частые ошибки

Точка в HTML. class=".badge" никогда не совпадет с .badge.
Два атрибута class. <p class="a" class="b"> оставляет только a. Пишите class="a b".
Пробел там, где нужны оба класса. .btn .primary ищет вложенный элемент; .btn.primary это тот же элемент.
Повторный id. Дубли id ломают getElementById, ссылки-якоря и связь с label, даже если CSS вроде бы работает.
Оформление всего через id. Из-за их специфичности последующие переопределения мучительны; используйте классы.

Часто задаваемые вопросы

Как выбрать класс в CSS?

Напишите точку и имя класса: .card { ... } оформляет каждый элемент с class="card". Точка пишется только в CSS; в HTML-атрибуте ее нет.

Чем класс отличается от id в CSS?

Класс можно назначить любому числу элементов, и у элемента их может быть несколько; id должен быть уникальным на странице, и у элемента он максимум один. В CSS специфичность #id намного выше, чем у .class, поэтому правила по ID труднее переопределить.

Как дать элементу два класса?

Разделите имена пробелом в одном атрибуте: class="btn primary". Два атрибута class на элементе не работают; браузер оставляет только первый.

Как выбрать элемент, у которого два класса?

Соедините селекторы классов без пробела: .btn.primary выбирает элементы, у которых есть оба класса. С пробелом .btn .primary означает элемент .primary внутри элемента .btn.

Может ли имя класса CSS начинаться с цифры?

В HTML может, но селектор не может начинаться с неэкранированной цифры, поэтому .1col невалиден в CSS. Экранируйте цифру (.\31 col) или, что лучше, начинайте имена классов с буквы.

Связанные концепции