Селекторы по тегу, классу и id

Учимся точно указывать, к каким именно элементам применить стиль — это сердце CSS.

Селектор — это шаблон, по которому браузер находит на странице элементы и применяет к ним правило.

Селектор по тегу

Самый простой селектор — имя тега. Он выбирает все элементы этого типа на странице.

p {
  color: #444;
}

Все абзацы станут тёмно-серыми. Селекторы по тегу удобны для базовых правил («все ссылки», «все заголовки»), но они грубые: нельзя оформить только некоторые абзацы.

Селектор по классу (через точку)

Класс — это метка, которую вы сами вешаете на нужные элементы через атрибут class. В CSS на класс ссылаются через точку перед именем.

<p class="highlight">Важный абзац</p>
<p>Обычный абзац</p>
<span class="highlight">И этот фрагмент</span>

.highlight {
  background: yellow;
}

Жёлтый фон получат только элементы с class="highlight" — и абзац, и span. Класс можно повесить на сколько угодно элементов и на любые теги. Это главный инструмент в CSS: классами пользуются чаще всего.

Один элемент может иметь несколько классов через пробел:

<button class="btn btn-primary">Купить</button>

Тогда к нему применятся правила и для .btn, и для .btn-primary.

Селектор по id (через решётку)

Id — это уникальный идентификатор: на странице он должен встречаться только один раз. В CSS на id ссылаются через решётку #.

<div id="header">Шапка сайта</div>

#header {
  background: #222;
  color: white;
}

Стиль применится к единственному элементу с id="header". Id специфичнее класса, но именно поэтому им стараются не злоупотреблять для оформления: высокая специфичность мешает потом переопределять стили. На практике для внешнего вида предпочитают классы, а id оставляют для якорей и JavaScript.

Универсальный селектор *

Звёздочка выбирает вообще все элементы. Её часто используют для сброса отступов в начале файла:

* {
  margin: 0;
  padding: 0;
}

Так все элементы лишаются отступов по умолчанию, и дальше вы задаёте их сами — это делает вёрстку предсказуемее.

Сравнение

Итог

• Селектор по тегу выбирает все элементы данного типа.
• Класс (.имя) — главный инструмент: вешается на любые элементы и переиспользуется.
• Id (#имя) уникален на странице; для оформления предпочитайте классы.