!important

Оновлено: 27.05.2022

!important

Має значення в тому випадку, коли користувачі підключають власну таблицю стилів, також застосовується підвищення специфічності стильового правила. Якщо виникає суперечність, коли стиль автора сторінки та користувача для одного й того ж елемента не співпадає, то !important дозволяє підвищити пріоритет стилю.

При використанні таблиці стилів або одночасному застосуванні різного стилю автора і користувача до одного і того ж селектора, браузер керується таким алгоритмом.

  • !important додано до авторського стилю — застосовуватиметься стиль автора
  • !important додано до користувацького стилю — застосовуватиметься стиль користувача.
  • !important немає як в авторському стилі, так і стилі користувача — застосовуватиметься стиль автора.
  • !important міститься в авторському стилі та стилі користувача — застосовуватиметься стиль користувача.

Результат від застосування !important в загальному показано у табл. 1

Табл. 1. Результат применения !important

Стиль автораСтиль користувачаРезультат
BODY {
/* Сірий колір тексту */
color: silver;

/* Розмір тексту 8 пунктів */
font-size: 8pt
}		BODY {
/* Чорний колір тексту */
color: #000;

/* Розмір тексту 12 пунктів */
font-size: 12pt
}

Lorem ipsum dolor sit amet...

Застосовуватиметься стиль автора, а саме: встановлено сірий колір тексту, розмір шрифту 8 пунктів.

BODY {
/* Сірий колір тексту */
color: silver;

/* Розмір тексту 8 пунктів */
font-size: 8pt
}		BODY {
/* Чорний колір тексту, підвищена важливість */
color: #000 !important;

/* Розмір тексту 12 пунктів */
font-size: 12pt
}

Lorem ipsum dolor sit amet...

Колір тексту буде встановленим для користувача, а розмір шрифту залишиться вихідним. У результаті побачимо чорний текст розміром 8 пунктів.

BODY {
/* Сірий колір тексту */
color: silver;

/* Розмір тексту 8 пунктів */
font-size: 8pt
}		BODY {
/* Чорний колір тексту, підвищена важливість */
color: #000 !important;

/* Розмір тексту 12 пунктів, підвищена важливість */
font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

Використовуватимуться всі стильові властивості користувача. Текст буде відображатися як чорний, розмір 12 пунктів.

BODY {
/* Сірий колір тексту, підвищена важливість */
color: silver !important;

/* Розмір тексту 8 пунктів, підвищена важливість */
font-size: 8pt !important
}		BODY {
/* Чорний колір тексту, підвищена важливість */
color: #000 !important;

/* Розмір тексту 12 пунктів, підвищена важливість */
font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

При додаванні !important до тієї та іншої таблиці пріоритет має стиль користувача. В результаті текст стане чорним, а його розмір збільшиться до 12 пунктів.


Коротка інформація

Значення за замовчуванням Ні
Наслудіється Ні
Застосовується До всіх елементів

Синтаксис

Свойство: <значение> !important

Приклад

У цьому прикладі для одного селектора задається та ж властивість з різними значеннями. Але оскільки до першого селектора додається !important, його стиль і буде застосовуватися на сторінці.

Примітка

При додаванні !important до значення стильової властивості його важливість підвищується. Якщо перевизначити значення тієї ж властивості без !important, воно ігноруватиметься браузерами. Але не в Internet Explorer версії 6 і нижче.

Браузери

!important

Переглянути сумісність з Can I use?

!important