Урок 4.2 — Селекторы

Селектор — это "адрес", по которому CSS находит элементы на странице. Если CSS — это правила одежды, то селектор — это "к кому эти правила применяются". Например: "все заголовки h1 сделать оранжевыми", "все элементы с классом .card сделать белыми с тенью".

Без селекторов пришлось бы стилизовать каждый элемент отдельно через атрибут style. Это было бы очень неудобно. CSS-селекторы позволяют задать стиль сразу для группы элементов.

В этом уроке мы изучим три базовых типа селекторов: по тегу, по классу и по ID. А также разберём, как они взаимодействуют друг с другом через каскад и приоритет.

Самый простой селектор — по названию тега. Он выбирает все элементы с таким тегом на странице. Если написать h1 { color: red; } — все заголовки h1 станут красными.

<style>
  h1 { color: #c2410c; font-size: 32px; }
  p { font-size: 18px; color: #333; line-height: 1.6; }
  a { color: #f97316; text-decoration: none; }
  ul { list-style-type: square; }
</style>

<h1>Этот заголовок — оранжевый</h1>
<p>Каждый абзац на странице будет 18px, цвет #333.</p>
<p>Даже этот второй абзац — потому что селектор по тегу p применяется ко всем p.</p>
<a href="#">Ссылка оранжевая, без подчёркивания.</a>
<ul>
  <li>Маркеры списка — квадратные</li>
  <li>Вместо стандартных кружочков</li>
</ul>

Селекторы по тегу удобны для задания стилей "по умолчанию". Например, вы хотите, чтобы все абзацы были 18px — напишите p { font-size: 18px; } и всё готово. Не нужно добавлять класс каждому абзацу.

Обратите внимание: text-decoration: none убирает подчёркивание у ссылок. list-style-type: square меняет маркеры списка на квадратные.

Селектор по классу — самый популярный тип. Он выбирает элементы с определённым атрибутом class в HTML. В CSS класс пишется через точку: .card, .menu-item, .button.

Главное преимущество — один класс можно использовать много раз на разных элементах. Хотите сделать 10 кнопок с одинаковым стилем? Просто добавьте всем класс .button.

<style>
  .card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
  }

  .title {
    color: #c2410c;
    font-size: 24px;
    font-weight: bold;
  }

  .button {
    background: #f97316;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  .important {
    background: #fef3c7;
    border-left: 4px solid #f97316;
    padding: 12px 16px;
  }
</style>

<div class="card">
  <div class="title">Первая карточка</div>
  <p>Текст внутри карточки.</p>
  <button class="button">Нажми меня</button>
</div>

<div class="card">
  <div class="title">Вторая карточка</div>
  <p class="important">⚠ Это важная информация!</p>
  <button class="button">Подробнее</button>
</div>

Что здесь происходит:

• Класс .card — белая карточка с тенью и закруглениями. Используется дважды.
• Класс .title — оранжевый жирный заголовок. Тоже дважды.
• Класс .button — оранжевая кнопка. Стилизует две кнопки.
• Класс .important — жёлтый блок с оранжевой полосой слева (border-left).

Обратите внимание: box-shadow — это свойство для теней. 0 2px 8px rgba(0,0,0,0.1) означает: тень без смещения по X, 2px вниз, размытие 8px, цвет чёрный с прозрачностью 10%. Элегантно и красиво!

Теперь давайте посмотрим, как задать класс в HTML. Всё просто: атрибут class со значением — именем класса.

<div class="card">...</div>
<p class="important">...</p>
<button class="button">...</button>
<span class="highlight">...</span>

У одного элемента может быть несколько классов: class="card important" — пробел разделяет их. Тогда на элемент будут действовать стили обоих классов.

Селектор по ID выбирает элемент с определённым атрибутом id. В CSS ID пишется через решётку: #header, #main-title, #footer.

Главное отличие от класса: ID должен быть уникальным на странице. Одну страницу — один ID. Нельзя использовать один ID дважды. Если вам нужно применить стиль к нескольким элементам — используйте класс.

<style>
  #page-title {
    color: #c2410c;
    font-size: 40px;
    text-align: center;
    border-bottom: 3px solid #f97316;
    padding-bottom: 10px;
  }

  #main-menu {
    background: #333;
    color: white;
    padding: 10px 20px;
  }

  #footer {
    background: #1e293b;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
  }
</style>

<h1 id="page-title">Добро пожаловать на сайт</h1>

<div id="main-menu">
  <a href="#">Главная</a> |
  <a href="#">Блог</a> |
  <a href="#">Контакты</a>
</div>

<p>Основной контент страницы...</p>

<div id="footer">
  © 2025, Мой сайт. Все права защищены.
</div>

Здесь каждый ID встречается один раз: page-title — только у заголовка, main-menu — только у меню, footer — только у подвала. Это правильно.

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

p {
  color: blue;  /* сначала синий */
}

p {
  color: red;   /* потом красный — переопределяет */
}

/* Итог: все p будут красными, потому что красный написан позже */

Это работает и с классами:

.text { color: blue; }
.text { color: green; } /* победит зелёный — он позже */

На практике это означает: если вы написали стиль, а он не применился — проверьте, нет ли ниже (или позже в файле) другого правила, которое его переопределяет. Просто переместите ваше правило ниже, и оно заработает.

Каскад также означает, что стили могут наследоваться от родителя к ребёнку. Например, если задать body { color: #333; font-family: Arial; }, то все элементы внутри body (заголовки, абзацы, списки) унаследуют эти цвета и шрифт, если не переопределят их.

Не все селекторы равны. У них есть "вес" (специфичность). Чем выше специфичность, тем сильнее селектор, и он победит даже если написан раньше.

Правило простое: ID весит больше, чем класс, а класс весит больше, чем тег.

#unique { color: purple; }    /* ID — самый сильный */
.special { color: orange; }  /* класс — средний */
p { color: blue; }           /* тег — слабый */

/* Если у абзаца есть класс .special и id="unique", то:
   - тег p говорит: синий ❌
   - класс .special говорит: оранжевый ❌
   - ID #unique говорит: фиолетовый ✅ (победитель) */

Вот как это выглядит в HTML:

<style>
  p { color: blue; }
  .special { color: orange; }
  #unique { color: purple; }
</style>

<p id="unique" class="special">
  Какого цвета этот текст? Фиолетового! Потому что ID (#unique) сильнее класса (.special) и тега (p).
</p>

Если есть несколько ID, классов и тегов — "вес" суммируется. Например, #header .nav a весит: 1 ID + 1 класс + 1 тег. Чтобы выиграть, нужно набрать больше "очков" в старшей категории.

Полная таблица приоритета (специфичности):

!important — экстренное правило, которое переопределяет всё. Но использовать его не рекомендуется, потому что его трудно переопределить в будущем.

Давайте потренируемся определять, какой селектор победит:

/* Пример 1 */
div { color: red; }
.warning { color: orange; }
/* Если у div есть class="warning" — победит orange (класс > тег) */

/* Пример 2 */
#menu { color: blue; }
.nav { color: green; }
/* ID сильнее — победит blue */

/* Пример 3 */
p.text { color: purple; }    /* тег + класс = 1 + 10 = 11 */
.text { color: pink; }       /* только класс = 10 */
/* Победит purple — у него больше вес (11 > 10) */

Давайте создадим навигационное меню и стилизуем его с помощью селекторов по тегу, классу и ID:

<style>
  /* Стили для всего меню через ID */
  #main-nav {
    background: #1e293b;
    padding: 15px 20px;
    border-radius: 8px;
  }

  /* Стили для ссылок внутри меню через комбинацию */
  #main-nav a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    margin-right: 20px;
    padding: 5px 10px;
    border-radius: 4px;
  }

  /* Стиль для активного пункта меню через класс */
  .nav-active {
    background: #f97316;
    color: white;
  }

  /* Стиль для ссылки при наведении (псевдокласс :hover) */
  #main-nav a:hover {
    background: #334155;
  }
</style>

<nav id="main-nav">
  <a href="#" class="nav-active">Главная</a>
  <a href="#">Блог</a>
  <a href="#">О нас</a>
  <a href="#">Контакты</a>
</nav>

Разбор:

• #main-nav — ID для всего меню (тёмный фон, скругления)
• #main-nav a — комбинированный селектор: все ссылки внутри меню (белый цвет, без подчёркивания)
• .nav-active — класс для активного пункта (оранжевый фон)
• #main-nav a:hover — псевдокласс :hover, стиль при наведении мыши

Обратите внимание на #main-nav a — это селектор с пробелом. Он означает: "найти все теги a внутри элемента с id="main-nav"". Пробел — это комбинатор "потомок" (descendant combinator).

Создадим галерею карточек с помощью класса:

<style>
  .card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    width: 280px;
    display: inline-block;
    margin: 10px;
    vertical-align: top;
  }

  .card h3 {
    color: #c2410c;
    margin-top: 0;
    font-size: 20px;
  }

  .card p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
  }

  .card-tag {
    display: inline-block;
    background: #fef3c7;
    color: #c2410c;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
  }

  .card.featured {
    border: 2px solid #f97316;
    box-shadow: 0 6px 16px rgba(249,115,22,0.2);
  }
</style>

<div class="card">
  <h3>HTML</h3>
  <p>Язык разметки для создания веб-страниц. Основа любого сайта.</p>
  <span class="card-tag">базовый</span>
</div>

<div class="card featured">
  <h3>CSS</h3>
  <p>Язык стилей для оформления веб-страниц. Делает сайты красивыми.</p>
  <span class="card-tag">популярный</span>
</div>

<div class="card">
  <h3>JavaScript</h3>
  <p>Язык программирования для интерактивных веб-страниц.</p>
  <span class="card-tag">продвинутый</span>
</div>

Новые приёмы в этом примере:

• .card h3 — селектор с пробелом: все h3 внутри .card
• .card.featured — два класса без пробела: элемент должен иметь ОБА класса (card и featured). В HTML: class="card featured"
• display: inline-block — карточки встают в ряд (но остаются блоками с размерами)
• vertical-align: top — выравнивание по верху (чтобы не скакали)
• card-tag — маленький тег (бирка) с закруглёнными краями

Карточка CSS выделена — у неё класс featured, и через .card.featured мы дали ей оранжевую рамку и более заметную тень.

Точка перед классом . В HTML пишем class="card" (без точки). В CSS пишем .card (с точкой). Никогда не путайте!

Решётка перед ID #. В HTML пишем id="header" (без решётки). В CSS пишем #header (с решёткой).

Повторение ID. Один ID может быть только на одном элементе. Если нужно несколько — используйте класс.

Пробел между классом и тегом. .card h3 (с пробелом) — все h3 внутри .card. .cardh3 (без пробела) — элемент с классом "cardh3". Пробел имеет значение!

Забыли точку с запятой. После каждого CSS-правила. Без неё следующий селектор не сработает.

• Селектор по тегу: p { } — все элементы с таким тегом
• Селектор по классу: .card { } — элементы с class="card" (можно много раз)
• Селектор по ID: #header { } — элемент с id="header" (только один)
• Приоритет: ID (100) > класс (10) > тег (1)
• Каскад: при одинаковой силе побеждает правило, написанное позже
• Комбинированные селекторы: #nav a (ссылки внутри меню), .card.featured (два класса)
• :hover — стиль при наведении мыши

Потренируйтесь: создайте страницу с меню, несколькими карточками и разными типами селекторов. Поэкспериментируйте с приоритетом: попробуйте "перебить" стиль класса с помощью ID. Откройте DevTools и посмотрите на специфичность в действии. В следующем уроке — блочная модель (padding, margin, border)!