Правило CSS !important
Наивысший приоритет свойству CSS придаёт правило !important.
Для этого свойства у данного элемента все предыдущие правила стилизации уступают ему.
Ключевое слово пишется последним в объявлении CSS, прямо перед точкой с запятой.
Синтаксис
selector {
property: value !important;
}
Пример правила !important в CSS
Встроенный стиль, селектор id и селектор класса ниже имеют более высокую специфичность, чем обычное правило для абзаца, и всё же все три абзаца получают жёлтый фон. Для этого свойства у этих элементов !important побеждает любое другое правило стилизации.
Пример
Вот как правило ведёт себя на практике:
p с background-color: yellow !important, чтобы переопределить их все, демонстрируя, что !important побеждает inline-стили, селекторы классов и селекторы id.
Результат: полная HTML-страница "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS !important Override</title>
<style>
p {
background-color: yellow !important;
}
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
</style>
</head>
<body>
<p style="background-color:orange;">This is a paragraph.</p>
<p class="myclass">This is a paragraph.</p>
<p id="myid">This is a paragraph.</p>
</body>
</html>
Используйте !important экономно
Правило !important уступает только другому правилу !important, размещённому в объявлении с такой же (или более высокой) специфичностью в исходном коде.
Код, написанный таким образом, становится запутанным и трудным для отладки, а большая таблица стилей только усугубляет это.
Пример
Здесь трудно сказать, какой из этих цветов считается самым важным:
p, селектором id #myid и селектором класса .myclass, все с использованием !important для background-color (красный, синий, серый). Продемонстрируйте, что при конфликте нескольких правил !important победителя определяет обычная специфичность.
Результат: полная HTML-страница "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple !important Rules</title>
<style>
p {
background-color: red !important;
}
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p class="myclass">This is a paragraph.</p>
<p id="myid">This is a paragraph.</p>
</body>
</html>
Несколько уместных случаев использования !important
И всё же есть несколько случаев, когда правило !important полезно:
1. Переопределение стиля, который нельзя переопределить иным способом. Одна из таких ситуаций — система управления контентом (CMS), код CSS которой вы не можете редактировать: ваши собственные стили могут использовать это правило, чтобы победить некоторые стили CMS.
2. Учёт предпочтений пользователя. Люди с чувствительностью к движению могут предпочитать сайты с меньшим количеством анимации. Функция prefers-reduced-motion в @media сообщает вам, попросил ли кто-то уменьшить движение, например анимации или переходы. Если человек включил эту настройку на своём компьютере, !important может отключить или ослабить эти эффекты.
3. Закрепление очень специфичного стиля для одного вида элементов. Предположим, все кнопки-ссылки на странице должны иметь одинаковый особый вид. Если поместить такую кнопку внутрь другого элемента с более высокой специфичностью, свойства могут вступить в конфликт, поэтому добавление !important к свойствам кнопки принудительно придаёт всем им один и тот же вид.
Медиазапросам посвящена отдельная глава далее в курсе.
Пример с уменьшением движения
@media (prefers-reduced-motion: reduce), которое использует !important, чтобы отключить все анимации и переходы для пользователей, предпочитающих уменьшенное движение. Включите простой анимированный элемент, чтобы эффект был заметен.
Результат: полная HTML-страница "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reduced Motion with !important</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation: mymove 5s infinite;
}
@keyframes mymove {
from { margin-left: 0px; }
to { margin-left: 300px; }
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<h1>Prefers Reduced Motion</h1>
<p>The red box below will animate, unless the user has enabled "reduce motion" in their system settings.</p>
<div></div>
</body>
</html>
Базовая кнопка-ссылка
Сначала кнопки-ссылки: серый цвет фона, белый текст, а также отступы и рамка:
a.button с серым фоном (#8c8c8c), белым текстом, отступом 5px, рамкой 1px solid black и без оформления текста.
Результат: полная HTML-страница "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Button Styling</title>
<style>
a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Link Button</h1>
<p><a href="https://prompt-cookbook.com" class="button">This is a link button</a></p>
</body>
</html>
Конфликт кнопки-ссылки
Поместите кнопку-ссылку в элемент с более высокой специфичностью, и её свойства могут вступить в конфликт:
a.button (серый фон, белый текст, отступ 5px, рамка 1px solid black, без оформления текста), размещённую внутри div с id "myDiv". Добавьте правило #myDiv a, устанавливающее цвет в красный, а цвет фона в жёлтый, демонстрируя конфликт специфичности.
Результат: полная HTML-страница "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Button Specificity Conflict</title>
<style>
a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Link Button Conflict</h1>
<div id="myDiv">
<p><a href="https://prompt-cookbook.com" class="button">This is a link button</a></p>
</div>
</body>
</html>
Кнопка-ссылка с !important
Если отметить свойства кнопки с помощью !important, все кнопки будут выглядеть одинаково, что бы их ни окружало:
a.button с использованием !important для всех свойств (серый фон #8c8c8c, белый текст, отступ 5px, рамка 1px solid black, без оформления текста), размещённую внутри div с id "myDiv". Добавьте правило #myDiv a с красным цветом и жёлтым фоном, чтобы показать, что стили кнопки с !important побеждают.
Результат: полная HTML-страница "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Button with !important</title>
<style>
a.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
text-decoration: none !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Link Button with !important</h1>
<div id="myDiv">
<p><a href="https://prompt-cookbook.com" class="button">This is a link button</a></p>
</div>
</body>
</html>