Селекторы

Зачем это нужно

Правило p { color: red; } красит все абзацы. А если нужно покрасить только один? Или только ссылки в меню? Или каждую вторую строку таблицы? Для этого есть селекторы — способы точно указать, к каким элементам применить стиль. Без них на настоящем сайте не обойтись.

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

Уже знакомый: имя тега без скобок.

h2 { color: teal; }

Результат: все <h2> на странице — бирюзовые.

Класс

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

<style>
  .price { color: green; font-weight: bold; }
</style>
<p>Чай — <span class="price">50 ₽</span></p>
<p>Кофе — <span class="price">90 ₽</span></p>

Результат: обе цены зелёные и жирные, остальной текст обычный.

Один класс можно повесить на сколько угодно элементов, а у элемента может быть несколько классов через пробел: class="price sale". Тогда к нему применятся правила и .price, и .sale.

Имена классов придумывай по смыслу: .price, .error, .card — а не .red-text (вдруг завтра ошибки станут оранжевыми).

Идентификатор id

id — уникальное имя элемента (одно на странице). В CSS пишется с решёткой:

<style>
  #logo { font-size: 30px; }
</style>
<div id="logo">CodeWithMe</div>

Результат: крупная надпись «CodeWithMe».

Для стилей чаще используют классы: id слишком «сильный» (см. ниже) и не повторяется. id нужен для якорей (href="#logo") и для JavaScript.

Группы и комбинации

h1, h2, h3 { font-family: Georgia, serif; }  /* группа: через запятую */
nav a { color: white; }                      /* потомок: a где угодно внутри nav */
ul > li { list-style: square; }              /* ребёнок: li прямо внутри ul */
p.note { font-style: italic; }               /* p, у которого есть класс note */

• Запятая — «и то, и другое»: одно правило для нескольких селекторов.
• Пробел — «внутри»: nav a найдёт ссылку на любой глубине внутри <nav>.
• > — «прямо внутри»: только непосредственные дети.
• Без пробела — «одновременно»: p.note — абзац с классом note (а .note у <div> не подойдёт).

Псевдоклассы

Псевдокласс — состояние или положение элемента. Пишется через двоеточие:

a:hover { color: orange; }          /* под курсором мыши */
input:focus { border-color: blue; } /* поле, в котором курсор */
li:first-child { font-weight: bold; } /* первый ребёнок у родителя */
li:last-child { color: gray; }      /* последний */
tr:nth-child(even) { background: #eee; } /* чётные: 2, 4, 6… */
tr:nth-child(odd) { background: white; } /* нечётные: 1, 3, 5… */
li:nth-child(3) { color: red; }     /* только третий */

Результат: ссылки становятся оранжевыми при наведении, а таблица — «зеброй», где чётные строки серые.

:nth-child(3n) выберет каждый третий элемент — 3, 6, 9…

Сила селектора (специфичность)

Если правила спорят, побеждает более точный селектор — неважно, какое написано позже:

<style>
  #main { color: red; }
  .text { color: green; }
  p { color: blue; }
</style>
<p id="main" class="text">Какого я цвета?</p>

Результат: красный. Сила селекторов: id > класс (и псевдокласс) > тег. Порядок «позже — сильнее» работает только при равной силе.

Можно прикинуть силу «очками»: каждый #id — сотня, каждый .класс или :псевдокласс — десяток, каждый тег — единица. nav a = 2, .menu a = 11, #top a = 101.

Как это работает внутри

Браузер проверяет селектор справа налево: для nav a он берёт каждую ссылку и спрашивает «есть ли среди моих предков <nav>?». Поэтому самая правая часть селектора — главная: она говорит, какой элемент красится.

Частые ошибки

1. Забыли точку или решётку. warning { … } ищет тег <warning>, а не класс.
2. Точка в HTML. class=".warning" — неверно. В HTML пишется без точки: class="warning".
3. Лишний пробел. p .note (потомок с классом внутри абзаца) и p.note (сам абзац с классом) — разные вещи.
4. Правило «не работает» из-за силы. Если стиль не применился, проверь, нет ли более сильного селектора.
5. !important везде. Слово !important перебивает всё, но потом его не перебить ничем. Используй в крайнем случае.

Шпаргалка

Селектор	Что выбирает
p	все <p>
.card	элементы с class="card"
#logo	элемент с id="logo"
h1, h2	и <h1>, и <h2>
nav a	<a> где угодно внутри <nav>
ul > li	<li> прямо внутри <ul>
p.note	<p> с классом note
a:hover, input:focus	под мышкой, в фокусе
:first-child, :last-child	первый, последний ребёнок
:nth-child(even / odd / 3)	чётные, нечётные, третий
#id > .класс > тег	сила селекторов