!important

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

        
          
          .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 действительно оказывался полезным.

Бывают случаи, когда вам приходится иметь дело с элементами 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:

        
          
          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 в коде, то это сигнал о серьёзных проблемах. Потратьте время и найдите первопричину. Приложите усилия, чтобы не использовать этот модификатор.