Специфичность CSS: калькулятор веса селектора
Вставьте селектор и узнайте его вес — станет понятно, какое правило победит в каскаде и почему стиль не применяется.
Вставьте селекторы слева — вес посчитается сам
Как считается вес селектора
Когда на один элемент претендуют несколько правил, побеждает не то, что ниже в файле, а то, у которого больше вес. Порядок в файле вступает в силу только при равном весе.
Вес записывают четвёркой чисел и сравнивают слева направо. Любой селектор с одним id перебьёт селектор хоть с сотней классов — разряды не переполняются.
| Вес | Что его даёт |
|---|---|
1-0-0-0 | Инлайн-стиль в атрибуте style |
0-1-0-0 | Идентификатор — #main |
0-0-1-0 | Класс, атрибут, псевдокласс — .btn, [type], :hover |
0-0-0-1 | Тег и псевдоэлемент — div, ::before |
Почему не применяются стили
Самая частая причина — как раз специфичность: где-то лежит более тяжёлый селектор, и он перебивает ваш, даже если ваш написан ниже. Вставьте оба в калькулятор и сравните вес. Если веса равны, а стиль всё равно не виден — ищите опечатку в имени класса, чужой !important или свойство, которое просто не наследуется.
Перебивать чужой стиль лучше аккуратно: добавьте класс родителя или продублируйте свой класс — .btn.btn вполне легальный приём, вес растёт, разметка не меняется. !important оставьте на крайний случай: перебить его потом можно будет только другим !important, и так рождается война, из которой нет выхода.
Когда конфликт разобран и лишние переопределения убраны, готовый CSS удобно сжать минификатором перед тем как отправить в продакшен.
Похожие инструменты
Другие полезные инструменты из той же категории
Часто задаваемые вопросы
Это вес селектора — число, по которому браузер решает, чьё правило победит, когда на один элемент претендуют несколько. Побеждает не то правило, что ниже в файле, а то, у которого вес больше. Порядок в файле вступает в силу только при равном весе.
Вес записывают тройкой A-B-C. A — количество id в селекторе, B — классов, атрибутов и псевдоклассов, C — тегов и псевдоэлементов. Сравнивают слева направо: любой селектор с одним id перебьёт селектор с хоть сотней классов. Например, #header .nav a — это 1-1-1.
Самая частая причина — как раз специфичность: где-то в проекте лежит более «тяжёлый» селектор, и он перебивает ваш, даже если ваш написан ниже. Вставьте оба селектора в калькулятор и сравните вес. Если веса равны, а стиль всё равно не виден — ищите опечатку в имени класса, !important у конкурента или то, что свойство просто не наследуется.
Поднимите вес аккуратно: добавьте класс родителя или продублируйте свой класс (.btn.btn — вполне легальный приём, вес растёт, разметка не меняется). Ещё чище — снизить вес чужого правила, если код ваш. !important стоит оставить на крайний случай: перебить его потом можно будет только другим !important, и так рождается война, из которой нет выхода.
!important переопределяет все правила специфичности и должен использоваться редко. Применяйте только для utility-классов или переопределения сторонних библиотек. Злоупотребление усложняет поддержку кода.
Используйте методологии БЭМ или CSS-in-JS, избегайте ID селекторов в стилях, применяйте низкую специфичность для базовых стилей, документируйте переопределения.