В чём разница между селектором по классу (.box) и по id (#box)? Когда что использовать?
Вижу в примерах то точку перед именем (.menu), то решётку (#menu). Понял, что один — это класс, другой — id. Но в чём именно разница и что выбирать новичку?
2 ответа
Разница в HTML и в том, сколько раз можно использовать.
Класс (в CSS пишется с точкой .) можно повесить на сколько угодно элементов:
<p class="highlight">первый</p>
<p class="highlight">второй</p>
.highlight {
background: yellow;
}
Оба абзаца станут жёлтыми.
id (в CSS пишется с решёткой #) должен быть уникальным — только у одного элемента на странице:
<div id="header">шапка</div>
#header {
background: black;
}
Простое правило для новичка: используй классы почти всегда. Они гибче, и их можно переиспользовать. id оставь для случаев, когда элемент реально один-единственный (или для якорей-ссылок и JavaScript).
Маленький нюанс на будущее: у id выше «вес» (специфичность), поэтому стиль через #id перебивает стиль через .class. Это иногда мешает — ещё одна причина, почему опытные верстальщики предпочитают классы.