Исполняемые доки CSS: !important в CSS

Q: Как перебить !important?

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

Q: Перебивает ли !important встроенные стили?

Да. Объявление в таблице стилей с !important сильнее обычного объявления в атрибуте style. Встроенное объявление, которое само помечено !important, оно не перебивает.

Что делает !important

Если добавить !important после значения, это объявление победит все обычные объявления того же свойства на том же элементе. Специфичность селектора и порядок в коде больше не важны.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>!important</title>
  <style>
    #intro { color: #2563eb; }           /* ID: very specific */
    .warning { color: #f59e0b !important; } /* class, but important */
  </style>
</head>
<body>
  <p id="intro" class="warning">Amber: !important beats the ID selector.</p>
</body>
</html>

Без !important победил бы селектор по ID, и текст был бы синим. Удалите !important в редакторе, чтобы проверить.

Синтаксис

selector {
  property: value !important;
}

Он ставится после значения и перед точкой с запятой. Действует только на одно это объявление, а не на все правило. Работает и в сокращенных свойствах (margin: 0 !important; делает важными все четыре стороны), и в атрибуте style.

Кто кого сильнее

Для стилей, которые пишет автор страницы, от самого слабого к самому сильному:

Ранг	Объявление	Пример
1	Обычное объявление в таблице стилей	`p { color: blue; }`
2	Обычное объявление в атрибуте `style`	`<p style="color: blue">`
3	`!important` в таблице стилей	`p { color: blue !important; }`
4	`!important` в атрибуте `style`	`<p style="color: blue !important">`

Внутри одного ранга решает специфичность, затем порядок объявлений: побеждает более позднее.

Это единственное законное повседневное применение !important: переопределить встроенный стиль, который вы не можете изменить, например написанный сторонним виджетом.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Beat inline</title>
  <style>
    .widget { background: #16a34a !important; }
    .widget-plain { background: #16a34a; }
    div { color: white; padding: 10px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="widget" style="background: #2563eb;">Green: stylesheet !important beats inline.</div>
  <div class="widget-plain" style="background: #2563eb;">Blue: a normal rule loses to inline.</div>
</body>
</html>

Когда оба объявления с !important

!important против !important возвращает нас к обычным правилам: побеждает более высокая специфичность, а при равенстве более позднее объявление.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Two important</title>
  <style>
    p { padding: 8px; color: white; }
    .card p { background: #2563eb !important; }  /* (0,1,1) */
    p.note { background: #f59e0b !important; }  /* (0,1,1), later */
    p { background: #16a34a !important; }       /* (0,0,1) */
  </style>
</head>
<body>
  <div class="card"><p class="note">Amber: same specificity, later rule.</p></div>
  <p>Green: only the type rule matches.</p>
</body>
</html>

Так !important и разрастается: как только одно правило его использует, правилу, которое должно его перебить, он тоже нужен, и специфичность снова начинает расти.

Специфичность CSS в одной таблице

Специфичность это вес селектора. Посчитайте три числа:

Столбец	Что учитывается	Пример селектора	Специфичность
A	Селекторы по ID	`#nav`	(1,0,0)
B	Классы, атрибуты, псевдоклассы	`.btn`, `[type="text"]`, `:hover`	(0,1,0) каждый
C	Селекторы типа, псевдоэлементы	`p`, `::before`	(0,0,1) каждый
нет	`*`, комбинаторы (`>`, `+`, `~`, пробел)	`*`, `ul > li`	ничего не добавляют

Сначала сравнивается столбец A; только при равенстве смотрят на B, затем на C. Поэтому #nav a (1,0,1) сильнее .menu .item .link a (0,3,1): один ID перевешивает любое число классов.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #nav a { color: #16a34a; }                /* (1,0,1) wins */
    .menu .item .link a { color: #f59e0b; }  /* (0,3,1) */
    a { color: #2563eb; }                     /* (0,0,1) */
  </style>
</head>
<body>
  <nav id="nav" class="menu">
    <div class="item"><span class="link"><a href="#">Green link</a></span></div>
  </nav>
</body>
</html>

Понимание этой таблицы и позволяет обходиться без !important: большинство проблем «мой CSS не применяется» объясняются более специфичным правилом где-то еще, и в панели Styles в DevTools ваше объявление будет зачеркнуто.

Более чистые альтернативы

Сравняйте специфичность и положитесь на порядок. Подключите свою таблицу стилей после библиотечной и используйте селектор не менее специфичный.
Понизьте специфичность чужого правила через :where(). Все внутри :where() считается нулем, поэтому базовые стили, написанные с ним, легко переопределить.
Используйте CSS-переменную как точку настройки. Компонент, который читает var(--btn-bg), можно перекрасить, не воюя с его селекторами. Подробнее в разделе переменные CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>where</title>
  <style>
    /* base styles with zero specificity */
    :where(#app .panel) { background: #e5e7eb; padding: 10px; }

    /* a plain class is enough to override */
    .highlight { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="app">
    <div class="panel">Gray base style.</div>
    <div class="panel highlight">Amber, no !important needed.</div>
  </div>
</body>
</html>

Как задать !important из JavaScript

element.style.color = 'red !important' не работает: значение невалидно и игнорируется. Используйте setProperty с третьим аргументом:

el.style.setProperty('color', '#f59e0b', 'important');

Частые ошибки

Не на своем месте. color: !important red; невалидно; он ставится после значения.
Использование в @keyframes. Объявления с !important внутри ключевых кадров игнорируются.
Решение им каждого конфликта. Найдите побеждающее правило в DevTools и сравняйте или понизьте его специфичность.
Ожидание, что он повлияет на другое свойство. color: red !important ничего не делает с background.
Забытый встроенный !important, который сильнее вашего. Ни одно правило в таблицах стилей страницы не перебьет style="color: red !important"; меняйте сам атрибут, например через JavaScript.

Часто задаваемые вопросы

Что делает !important в CSS?

Дает одному объявлению приоритет над всеми обычными объявлениями того же свойства на том же элементе, независимо от специфичности селектора и порядка. Пишется после значения: color: red !important;.

Как перебить !important?

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

Перебивает ли !important встроенные стили?

Да. Объявление в таблице стилей с !important сильнее обычного объявления в атрибуте style. Встроенное объявление, которое само помечено !important, оно не перебивает.

Плохая ли практика использовать !important?

Если им выигрывают борьбу специфичностей, да: следующему переопределению тоже понадобится !important, и таблицу стилей станет трудно менять. Он уместен для утилитарных классов, которые должны применяться всегда (например, .hidden), для переопределения встроенных стилей сторонних виджетов и в пользовательских таблицах стилей.

Как считается специфичность в CSS?

Считайте три столбца: селекторы по ID, затем классы, атрибуты и псевдоклассы, затем селекторы типа и псевдоэлементы. Сравнивайте по столбцам слева направо, поэтому #nav a (1,0,1) сильнее .menu .item a (0,2,1). Универсальный селектор * и комбинаторы ничего не добавляют.

Связанные концепции