CSS :: Модификатор !important

css-модификатор !important (от англ. important – важный) используется для повышения приоритета стилевого правила. В случае необходимости !important указывается во внутренних и внешних таблицах стилей после значения css-свойства через пробел, например, p{color: green !important;}. Свойство стиля, в котором указан данный параметр, обладает наибольшим приоритетом в независимости от расположения таблицы стилей в коде документа или же самого правила внутри таблицы стилей, но только в ситуации, когда специфичности стилей равны (при этом не следует забывать, что специфичность встроенного стиля следует считать наивысшей в любом случае!). Опять же, если свойств с таким параметром несколько, да еще и специфичности соответствующих селекторов одинаковы, то приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы.

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

Характеристики

Значение по умолчанию: нет.
Применяется: ко всем элементам.
Наследуется: нет.

Синтаксис

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

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-cascade-3/#importance

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/Specificity

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>

		/* Специфичность селектора выше */
		div p.green_normal{
		color: #007700;      
		font-weight: normal;   
		}

		/* Специфичность селектора ниже, */
		/* плюс отсутствует !important */
		.bold_wrong{
		font-weight: bold;   
		}	

		/* Специфичность селектора ниже, */
		/* но присутствует !important */	
		.bold_font{
		font-weight: bold !important;   
		}

	</style>

</head>
<body>

	<div>
		<p class="green_normal">
			Получаем обычный текст, зеленого цвета.
		</p>
	</div>

	<div>
		<p class="green_normal bold_wrong">
			Начертание не стало полужирным, т.к. приоритет<br> 
			селектора .bold_font ниже, чем селектора div p.green_normal.
		</p>
	</div>

	<div>
		<p class="green_normal bold_font">
			Цвет текста остался зеленым, но начертание стало полужирным,<br> 
			т.к. в подключенном классе .bold_font присутствует !important.
		</p>
	</div>

	<div>
		<p class="green_normal bold_font">
			Цвет текста остался зеленым, но начертание стало полужирным,<br> 
			т.к. в подключенном классе .bold_font присутствует !important.<br>
			<span style="font-weight: normal">Но мое начертание осталось 
			обычным,<br> т.к. встроенный стиль имеет наивысший приоритет.</span>
		</p>
	</div>

</body>
</html>

Пример №1

HTML CSS Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  
  <meta name="robots" content="noindex">
  <title>Пример №2</title>

	<!-- Подключаем внешнюю таблицу стилей -->
	<link rel="stylesheet" href="styles.css">

	<style>

		/* Базовый класс */
		div p.green_normal{
		color: #007700;      
		font-weight: normal;   
		}

		/* Специфичность селектора такая же, как */
		/* и у класса .bold_font во внешней CSS */
		/* плюс также присутствует !important */
		.normal_strong{
		font-weight: normal !important;   
		}	

	</style>
   
</head>
<body>
 
  <div>
    <p class="green_normal bold_font">
			Цвет текста остался зеленым, но начертание стало полужирным,<br> 
			несмотря на то, что класс .green_normal находится во внутренней<br>  
			таблице стилей, поскольку в подключенном классе .bold_font из<br> 
			внешней таблицы стилей присутствует параметр !important.
    </p>
  </div>
 
  <div>
		<p class="green_normal normal_strong">
			Цвет текста остался зеленым, но начертание полужирным не стало,<br> 
			т.к. подключенный класс .normal_strong имеет ту же специфичность<br> 
			селектора, что и класс .bold_font, в нем также присутствует<br> 
			модификатор !important, но зато он расположен во внутренней<br> 
			таблице стилей, которая имеет приоритет над внешней таблицей.
		</p>
  </div> 
   
</body>
</html>

/* Специфичность селектора ниже, */
/* + это внешняя таблица стилей */
/* но присутствует !important */	
.bold_font{
font-weight: bold !important;   
}

Пример №2