CSS Правило !important
Що таке !important?
Правило !important в CSS використовується для надання більшої важливості властивості / значенню, ніж зазвичай.
Фактично, якщо ви використовуєте правило !important, воно перевизначить ВСІ попередні правила стилізації для конкретної властивості даного елементу!
Давайте розглянемо приклад:
Приклад
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Пояснення прикладу
В наведеному вище прикладі всі три параграфа отримають червоний колір фону, хоча селектор ідентифікатору і селектор класу мають більш високу специфічність. Правило !important перевизначає властивість background-color в обох випадках.
Про важливість !important
Єдиний спосіб перевизначити правило !important - це увімкнути інше правило !important в оголошенні з тією ж (або вище) специфічністю початкового коду - і тут починається проблема! Це збиває CSS-код з пантелику, й відлагодження буде складним, особливо, якщо у вас велика таблиця стилів!
Тут ми створили простий приклад. Коли ви дивитесь на початковий CSS-код, не дуже зрозуміло, який колір вважається найбільш важливим:
Приклад
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Спробуйте самі »
Порада: Корисно знати про правило !important, ви можете побачити його в деякому вихідному CSS-коді. Однак не використовуйте його, якщо в цьому немає крайньої потреби.
Можливе одне або два справедливих використання !important
Один зі способів використання !important - це перевизначення стилю, який неможливо змінити жодним іншим способом. Таке може бути, якщо ви працюєте в системі управління контентом (CMS) і не можете редагувати CSS-код. Потім ви можете встановити декілька користувальницьких стилів, щоб перевизначити деякі стилі CMS.
Інший спосіб використання !important : наприклад, вам потрібен особливий вигляд для всіх кнопок на сторінці. Тут кнопки мають сірий колір фону, білий текст і деякі відступи та межі:
Приклад
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Спробуйте самі »
Зовнішній вигляд кнопки може іноді змінюватись, якщо ми розмістимо її в інший елемент з більш високою специфічністю, і властивості вступлять в конфлікт. Ось приклад цього:
Приклад
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Спробуйте самі »
Щоб "змусити" всі кнопки виглядіти однаково, не дивлячись ні на що, ми можемо додати правило !important до властивостей кнопки, наприклад:
Приклад
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
Спробуйте самі »
