Селекторы по тегу, классу и ID: как браузер находит элементы (CSS)

Селектор — это просто правило: «возьми вот эти элементы и примени к ним такие стили». Браузер читает селектор, ищет в HTML подходящие элементы и красит/ставит отступы/меняет размеры. Разберём три самых частых случая.

Селектор по тегу: ко всем элементам этого типа

Пишешь имя тега — и правило срабатывает для всех таких элементов на странице.

p {
  color: #333;
  line-height: 1.6;
}

HTML:

<p>Первый абзац.</p>
<p>Второй абзац.</p>
<p>Третий абзац.</p>

Браузер берёт каждый <p> и применяет к нему эти стили.

Когда удобно: когда надо задать общий стиль для целой группы элементов. Например, всем заголовкам h2 — один шрифт, всем ссылкам — один цвет.

Селектор по классу: к группе элементов с общей меткой

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

.card {
  background: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
 
.btn {
  background: #4facf9;
  color: #000;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

HTML:

<div class="card">
  <h3>Заголовок карточки</h3>
  <p>Текст внутри карточки.</p>
</div>
 
<button class="btn">Кнопка</button>
<a href="#" class="btn">Ссылка-кнопка</a>

Важные нюансы:

• Один элемент может иметь несколько классов: <div class="card featured">. Тогда сработают стили и .card, и .featured.
• Классы можно комбинировать в селекторе: .card.featured { ... } — стиль применится только к элементам, у которых есть оба класса.
• Класс не обязан быть уникальным: на странице может быть хоть сто элементов с классом .btn.

Когда удобно: почти всегда для стилизации компонентов: карточки, кнопки, формы, блоки.

Селектор по ID: к одному конкретному элементу

ID — это уникальный идентификатор элемента. В HTML ставится через атрибут id, в CSS обозначается решёткой.

#main-header {
  background-color: #222;
  color: white;
  padding: 20px;
}

HTML:

<header id="main-header">
  <h1>Главный заголовок страницы</h1>
</header>

Важные нюансы:

• На одной странице id должен быть только у одного элемента. Если поставить два одинаковых id, это ошибка разметки. Браузер всё равно применит стили, но поведение может стать непредсказуемым (особенно в JS).
• У ID очень высокая специфичность: такой стиль сложнее переопределить позже.

Когда удобно: для уникальных частей страницы — шапка, подвал, главный баннер, форма обратной связи. Но для обычной стилизации лучше брать классы.

Как браузер всё это сравнивает: простой пример

Допустим, есть такие правила:

p { color: blue; }
.text { color: green; }
#intro { color: red; }

И такой HTML:

<p id="intro" class="text">Текст</p>

Цвет будет красный. Почему: у ID (#intro) приоритет выше, чем у класса (.text), а у класса — выше, чем у тега (p). Это и есть «каскад»: браузер смотрит, какое правило «сильнее», и применяет его.

Шпаргалка по синтаксису

Частые ошибки новичков

• Путают точку и решётку. .my-class — это класс, #my-id — это ID. Если написать #card вместо .card, стили не сработают, потому что в HTML нет id="card".
• Ставят ID везде. ID нужен для уникальных вещей. Если у тебя 10 карточек — не надо каждому давать id="card-1", id="card-2"… Лучше один класс .card и всё.
• Дублируют ID. На странице не должно быть двух элементов с одинаковым id. Это ломает логику и усложняет поддержку.