Класс и ID селектор

В CSS классы и ID используются для точного выбора элементов и назначения им стилей. Они позволяют разделять стили и управлять оформлением элементов страницы.

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

Класс задается через атрибут class и обозначается точкой . в CSS:

<div class="box">Пример</div>

.box {
  background: lightblue;
  padding: 10px;
}

Селектор ID

ID задается через атрибут id и обозначается решеткой # в CSS. Он уникален для каждого элемента на странице:

<div id="header">Заголовок</div>

#header {
  background: coral;
  padding: 20px;
}

Различия между классом и ID

  • Класс можно использовать на множестве элементов, ID должен быть уникальным.
  • В специфичности CSS ID имеет больший приоритет, чем класс.
  • Классы удобны для повторного применения стилей, ID — для уникальных элементов.

Резюме

  • Используйте class для группирования элементов с одинаковым стилем.
  • Используйте id для уникальных элементов.
  • Комбинируйте селекторы для более точного контроля оформления.