/ ↲
    Расширенный поиск

    CSS

    !important

    Опасный приём для повышения важности стилей. Ломает специфичность и каскад.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    Уникальный модификатор, позволяющий применить значение свойства вопреки обычной специфичности и каскаду.

    Пример

    Скопировано
            
          
          .text {  color: green !important;}.text {  color: red;}
          .text {
  color: green !important;
}

.text {
  color: red;
}

    По логике каскада текст в блоке с классом text должен быть красного цвета, потому что это правило стоит ниже в коде. Но из-за модификатора !important цвет текста будет зелёным.

            
          
          #main-title {  color: purple;}.title {  color: blue !important;}
          #main-title {
  color: purple;
}

.title {
  color: blue !important;
}

    В этом примере селектор #main-title более специфичный, чем .title. Но цвет текста будет голубым из-за !important.

    Как пишется

    Скопировано

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

    Как понять

    Скопировано

    Модификатор !important — последний аргумент в споре стилей. С ним нужно обращаться очень аккуратно. Перед тем как использовать его в своём коде, убедитесь, что иначе никак.

    Вот часто встречающийся сценарий:

    1. Хм, почему мои великолепные стили не применяются?
    2. Использую-ка !important.
    3. Теперь всё отлично!

    Но делать так не стоит. Лучше потратить время и разобраться в исходной причине.

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

    Зачем он нужен?

    Скопировано

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

    Атрибут style

    Скопировано

    Бывают случаи, когда вам приходится иметь дело с элементами HTML-документа, у которых стили заданы при помощи атрибута style:

            
          
          <h1 class="header" style="color: red">  Заголовок</h1>
          <h1 class="header" style="color: red">
  Заголовок
</h1>

    Вы не сможете перебить свойство color у элемента <h1> даже усилением веса селектора:

            
          
          h1.header {  color: green;}
          h1.header {
  color: green;
}

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

            
          
          .header {  color: green !important;}
          .header {
  color: green !important;
}

    В результате, цвет <h1> изменится на зелёный.

    Легаси

    Скопировано

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

    Браузерные расширения

    Скопировано

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

    Как перебить правило с !important

    Скопировано

    Специфичный селектор

    Скопировано

    Используйте более специфичный селектор в сочетании с !important:

            
          
          h2 span {  font-size: 50px !important;}#main-title span {  font-size: 20px !important;}.title span {  font-size: 10px !important;}
          h2 span {
  font-size: 50px !important;
}

#main-title span {
  font-size: 20px !important;
}

.title span {
  font-size: 10px !important;
}

    Хотя во всех трёх CSS-правилах используется !important, размер шрифта будет 20 пикселей, потому что селектор #main-title span «весит» больше остальных.

    Каскад

    Скопировано

    Напишите ниже в коде точно такое же правило вместе с !important, но с другим значением свойства.

            
          
          h2 span {  font-size: 50px !important;}h2 span {  font-size: 10px !important;}
          h2 span {
  font-size: 50px !important;
}

h2 span {
  font-size: 10px !important;
}

    В этой борьбе выиграет правило, стоящее ниже — из-за каскадной натуры стилей. Размер текста будет 10 пикселей.

    Подсказки

    Скопировано

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

    Читайте также