Селекторы и каскад

Когда два правила задают одному элементу разные цвета, CSS не гадает. Он сравнивает селекторы, и один id побеждает любое число классов.

Выбираем элементы

Селектор является шаблоном, которому соответствуют элементы страницы. Простейшие селекторы выбирают по имени элемента, по классу или по id. p является селектором типа и выбирает все абзацы. .note является селектором класса и выбирает все элементы с class="note"; у одного элемента может быть несколько классов через пробел, а один класс можно использовать на многих элементах. #intro является селектором id и выбирает единственный элемент с id="intro". *, универсальный селектор, выбирает всё.

p { line-height: 1.5; }            /* every p */
.note { background: #fff4d6; }     /* class="note" */
#intro { font-size: 20px; }        /* id="intro" */
h1, h2 { font-weight: 600; }       /* group: h1 and h2 */
nav a { text-decoration: none; }   /* a anywhere inside nav */
ul > li { margin: 4px 0; }         /* li that is a direct child of ul */
a:hover { text-decoration: underline; }
input[type="email"] { width: 20em; }

Сочетаем селекторы

Запятая группирует селекторы с одинаковыми объявлениями, поэтому h1, h2 оформляет оба. Пробел является комбинатором потомков: nav a выбирает ссылки где угодно внутри nav, на любой глубине. > строже и выбирает только прямых потомков. Если написать два простых селектора вместе без пробела, как в a.active, одному элементу нужно подходить под оба: это ссылка, у которой ещё и класс active. Селекторы атрибутов в квадратных скобках выбирают по атрибуту, например input[type="email"].

Псевдоклассы, которые пишутся с одним двоеточием, выбирают элементы в определённом состоянии или положении: :hover, пока над элементом указатель, :focus-visible, когда на нём фокус клавиатуры, :first-child, когда он первый потомок своего родителя. Псевдоэлементы, которые пишутся с двумя двоеточиями, оформляют часть элемента, например ::first-line или ::placeholder.

Когда правила спорят

Часто несколько правил задают одно и то же свойство одному элементу. Какое из них победит, решает каскад, та самая C в CSS. Если оставить в стороне собственные стили браузера и !important, почти всё решают два вопроса. Во-первых, какой селектор специфичнее? Специфичность считают тремя числами: id, затем классы (вместе с селекторами атрибутов и псевдоклассами), затем имена элементов. #menu a даёт 1-0-1, .active даёт 0-1-0, а nav a даёт 0-0-2. Числа сравнивают слева, поэтому один id побеждает любое число классов. Во-вторых, если специфичность равна, побеждает правило, которое стоит в таблице стилей позже.

Встроенные атрибуты style побеждают любой селектор, а объявление с пометкой !important побеждает обычные. Оба способа соблазнительны как быстрое исправление, но усложняют следующую правку, потому что перебить их можно только тем же самым. Большинство команд держат специфичность низкой и ровной и оформляют в основном через классы, чтобы результат можно было предсказать по порядку в файле.

Наследование

Некоторые свойства автоматически передаются от родителя к потомку. Задай color или font-family для body, и каждый абзац, список и ячейка таблицы внутри получат это значение, если только правило не задаёт им своё. Свойства, связанные с текстом, обычно наследуются; свойства блока, например width, padding, border и margin, не наследуются, поэтому рамка у раздела не появляется вокруг каждого абзаца внутри. Ключевое слово inherit заставляет свойство взять значение родителя.

Называй классы по тому, чем является элемент, а не по тому, как он выглядит. .warning сохраняет смысл, когда дизайнер меняет цвет с красного на оранжевый, а .red-text нет. Id уникальны, поэтому их лучше оставить для целей ссылок и подписей форм, а не для оформления: так специфичность остаётся низкой.