Ключевое слово CSS `!important`

Разделитель !, за которым следует ключевое слово important, помечает объявление как важное. Флаг !important изменяет правила выбора объявлений в каскаде. Объявление, которое не является важным, называется обычным.

Чтобы пометить объявление как важное, добавьте флаг important (!important) после значения в объявлении. Между разделителем и ключевым словом могут быть пробелы, но обычно флаг записывают как !important без пробелов.

selector {
  property: value; /* normal declaration */
  property: value !important; /* important declaration (preferred) */
  property: value ! important; /* important declaration (not preferred) */
}

!important следует за значением в объявлении пары «свойство — значение» и отделяется от него нулём или более пробелами. Флаг important должен быть последним токеном в объявлении. Иными словами, между флагом и завершающей точкой с запятой объявления могут быть пробелы и комментарии, но ничего больше.

Влияние на каскад

Для важных объявлений порядок приоритета источников и слоёв каскада меняется на обратный. Без флага important объявления в таблицах стилей автора переопределяют объявления в таблице стилей пользователя, которые, в свою очередь, переопределяют объявления в таблице стилей браузера по умолчанию.

Для важного объявления порядок приоритета меняется на обратный. Объявления, помеченные как важные в таблицах стилей браузера, переопределяют все важные объявления в таблицах стилей пользователя. Аналогично, все важные объявления в таблицах стилей пользователя переопределяют все важные объявления в таблицах стилей автора. Наконец, все важные объявления имеют приоритет над всеми анимациями.

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

Есть ли что-нибудь, имеющее приоритет над важными объявлениями? Да, переходы. Переходы CSS позволяют управлять скоростью изменения значения свойства с одного на другое. Во время перехода от одного значения к другому свойство не будет соответствовать конкретному важному объявлению.

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

В этом примере свойства color и background-color переходят в состояние при наведении курсора за две секунды. Несмотря на то что состояния по умолчанию заданы обычными объявлениями, а состояния при наведении — объявлениями !important, переход всё же происходит.

Слои каскада

В каждом из трёх источников таблиц стилей — автора, пользователя и браузера — обычные объявления вне слоёв переопределяют объявления в слоях, причём последнее объявление имеет приоритет над слоями, объявленными ранее. Для важных объявлений порядок приоритета меняется на обратный: важные объявления в первом слое имеют приоритет над важными объявлениями в следующем слое и так далее. Кроме того, все важные объявления имеют приоритет над важными объявлениями, заданными вне любых слоёв.

Встроенные стили

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

!important и специфичность

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

#myElement#myElement#myElement .myClass.myClass p:hover {
  color: blue;
}

p {
  color: red !important;
}

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

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

#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}

В этом случае важна специфичность селектора. Порядок в исходном коде имел бы значение, только если бы специфичность селекторов была одинаковой.

Влияние на сокращённые свойства

Если объявить сокращённое свойство с помощью !important, все его под-свойства станут важными. Следующие два блока стилей с селекторами эквивалентны:

p {
  background: blue !important;
}

p {
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto auto !important;
  background-repeat: repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
  background-attachment: scroll !important;
  background-color: blue !important;
}

Этот пример показывает одну из нескольких причин, по которым обычно рекомендуется избегать флага important.

Влияние на пользовательские свойства

Если добавить флаг !important к объявлению значения пользовательского свойства, присваивание значения становится важным. Затем флаг !important удаляется из значения пользовательского свойства. Флаг !important не передаётся как часть значения пользовательского свойства функции var().

:root {
  --my-color: red !important;
  --my-color: blue;
}
p {
  color: var(--my-color);
}
blockquote {
  color: var(--my-color);
  color: purple;
}

<p>This is a paragraph</p>
<blockquote>This is a blockquote</blockquote>

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

Рекомендации

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

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

Если нужно переопределить внешнюю таблицу стилей, содержащую важные объявления, создайте слой каскада с необходимыми переопределениями и объявите этот слой первым.

Вопросы доступности

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

Совместимость с браузерами

Эта возможность поддерживается всеми браузерами.

См. также

• Специфичность CSS
• Каскад CSS