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

CSS (каскадные таблицы стилей) — это язык, который управляет визуальным представлением. Вы записываете правила — каждое правило содержит селектор, выбирающий элементы, и блок объявлений с парами свойство—значение.

Три основных селектора: type выбирает все элементы с указанным тегом (p), class — элементы с указанным классом (.card), ID — один элемент по идентификатору (#logo). Предпочитайте классы — у ID очень высокая специфичность.

Выбирайте элементы по значению атрибута с помощью [type="email"]. Используйте псевдоклассы для состояний: :hover, :focus, :active, :checked, :nth-child(), :first-child, :last-child.

Комбинаторы описывают отношения между элементами: пробел (потомок), > (непосредственный дочерний элемент), + (соседний элемент на том же уровне), ~ (любой соседний элемент на том же уровне).

Если несколько правил выбирают один и тот же элемент, специфичность определяет, какое из них победит. Селекторы ID (0,1,0,0) сильнее селекторов классов (0,0,1,0), а те сильнее селекторов по типу (0,0,0,1). Встроенные стили сильнее всех. !important сильнее всего — используйте его только в крайнем случае.

Отдельно подсчитайте ID, классы/атрибуты/псевдоклассы и типы. Сравнивайте столбцы по очереди. Пример: #nav .link:hover = (0,1,1,1). .nav a = (0,0,1,1). Побеждает первый селектор.

Если специфичность одинакова, побеждает правило, расположенное позже в таблице стилей. Это буква C в CSS — каскад. И порядок импорта, и порядок в исходном коде имеют значение.

Некоторые свойства CSS по умолчанию наследуются — дочерние элементы получают значение родительского элемента, даже если Вы не задавали его отдельно. Свойства, связанные с текстом, например color, font-family и line-height, наследуются. Свойства блочной модели, например margin, — нет.

:is() и :where() позволяют записывать краткие селекторы, соответствующие любому элементу из списка. Разница в том, что :is() наследует наивысшую специфичность своих аргументов, а :where() всегда имеет нулевую специфичность.

Универсальный селектор * соответствует каждому элементу. Его часто используют в сбросах CSS: *, *::before, *::after { box-sizing: border-box; } — это делает блочную модель гораздо более предсказуемой.

Перед Вашими стилями браузеры применяют собственную таблицу стилей (так называемую таблицу стилей пользовательского агента). Сбросы CSS, например normalize.css, или каскадные слои нейтрализуют эти значения по умолчанию, чтобы стилизация начиналась с известной исходной точки.

Выбирайте элементы с помощью селекторов по типу, классу, ID, атрибуту и псевдоклассов. Специфичность разрешает конфликты (ID > классы > типы). Каскад разрешает равенство с помощью порядка в исходном коде. Наследование автоматически передаёт стили текста дочерним элементам.