Главная идея
CSS-правило состоит из двух частей: селектор (кого стилизуем) и блок объявлений в фигурных скобках (что делаем). Селектор — это адрес: он описывает, как найти нужные элементы среди сотен тегов на странице. Научиться писать селекторы точно — значит уметь попасть стилем ровно туда, куда нужно, и никуда больше.
Селектор — это как объявление диктора в переполненном зале. «Все в зале!» — это селектор по тегу (p): откликнутся вообще все одинаковые элементы. «Люди с зелёным бейджем!» — это класс (.card): бейдж можно выдать многим. «Иван Петров, подойдите!» — это id (#main): имя уникально, человек один. «Дети тех, кто сидит в зелёном секторе» — это селектор потомков (.card p). А «те, кто сейчас поднял руку» — псевдокласс состояния (:hover). Чем точнее формулировка, тем меньше «лишних» людей встанет.
Как браузер применяет селектор
Браузер берёт селектор, проходит по дереву элементов и собирает все, что под него подходят. К найденным элементам применяются свойства. Вот основные виды селекторов и что именно каждый «ловит»:
.card p подсвечивает только параграфы внутри .card; остальные элементы остаются нетронутыми.| Вид | Запись | Кого выбирает |
|---|---|---|
| По тегу | p | Все абзацы. Базовое оформление типа элементов. |
| По классу | .card | Все с class="card". Класс можно дать многим, элемент — иметь несколько классов. |
| По id | #main | Один уникальный элемент с id="main". |
| Группировка | h1, h2, h3 | Все перечисленные. Один стиль для нескольких селекторов сразу. |
| Потомки | .card p | p внутри .card на любой глубине. |
| Дочерние | .menu > li | Только прямые дети .menu, без вложенных. |
| Псевдокласс | a:hover | Состояние: наведение, фокус, отмеченность. |
| По позиции | li:nth-child(2) | Элемент по его номеру среди соседей. |
| По атрибуту | input[type="email"] | Элементы с конкретным атрибутом/значением. |
Какой селектор когда применять
Класс — главный рабочий инструмент. Он переиспользуем, не привязан к месту в разметке и легко переопределяется. Тег хорош для базовых правил (сброс отступов, типографика). Id в CSS используют осторожно: он повышает специфичность (см. урок 12) и потом мешает переопределять стили. Комбинированные селекторы (потомки, дочерние) выбирают элементы по контексту — «эта ссылка именно в навигации». Псевдоклассы описывают то, что меняется во времени: :hover, :focus-visible, :checked, :disabled.
> — разные вещи. .card p (с пробелом) ловит p на любой глубине, а .card > p — только прямых детей. А пропущенный пробел склеивает: .card.primary — это один элемент с двумя классами сразу.