Специфичность 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 селекторов в стилях, применяйте низкую специфичность для базовых стилей, документируйте переопределения.