Use of important ошибка

Любая фича в «кривых» руках становится плохой. Импортант —  не исключение. Плохо не то, что он умеет, а то, как его используют.

Как работает !important

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

Например:

.content .title {
    color: red;
}

.title {
    color: blue;
}

В этом случае, несмотря на то, что синий цвет применяется к заголовку после красного, в результате мы получим все же красный заголовок. Потому, что первый селектор является более специфичным (если вдруг вы с этим не знакомы, не читайте дальше  —  будет только хуже, лучше вот сюда и учите специфичность).

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

.content .title {
    color: red;
}

.title {
    color: blue !important;
}

Заголовок будет синим! Это свойство нарушает естественный поток написанных нами правил и менее приоритетным стилям даёт наибольший приоритет.

Ну хотя, как «плевать»… Не совсем уж и плевать. Допишем ещё один импортант.

.content .title {
    color: red !important;
}

.title {
    color: blue !important;
}

И заголовок снова красный. Потому что у нас конфликтуют два !important и решается этот конфликт сравнением весов селекторов.

Импортант —  это плохо, когда так:

.title {
    color: red;
}

«Хм, я же написал “красный”, почему мой заголовок не красный? А если так?»

.title {
    color: red !important;
}

«Отлично! Красный!» А точно ли отлично?

Такой подход плох как минимум потому, что вы переопределяете стили не разобравшись, почему они не применялись без импортанта. Скорее всего, вес селектора, которым вы воспользовались, оказался просто недостаточным и, написав чуть более точный и «тяжелый» селектор, вы бы решили свою проблему, а так вы жестко переопределили стили, и хорошо, если вы знаете и проверили все места, где использовался этот класс, но если это не так, то вы подчинили элемент в одном месте и, вероятно, сломали в другом.

Инструмент для hotfix

Очень часто, когда я задаю кому-то вопрос про импортанты, я слышу ответ в стиле: «Я использую important тогда, когда мне нужно быстро пофиксить проблему и некогда разбираться в коде, который писал не я и который написан очень плохо».

Да, но только задачи всегда «срочные», такие задачи, как правило, никто и никогда не доделает, так это и оставив. Вы и сами не заметили, как сделали «плохой чужой код» ещё хуже.

Что значит «быстро»? Разве узнать необходимый вес селектора для переопределения так сложно и долго? Мы очень активно используем DevTools при разработке, и для решения этой задачи ответ у нас есть там же.

Инспектируем элемент, который хотим изменить. Его текущий цвет — черный. Смотрим, по какому же селектору был назначен этот цвет?

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

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

Сторонние решения и чужой код

Второй по популярности ответ на вопрос про необходимость использования импортантов: «Я использую !important, когда переопределяю стили сторонних библиотек и плагинов или CMS-ок».

Этот ответ чуть ближе к правде, но только если его чуть более точно сформулировать. Именно в такой форме он неправильный, потому как стили сторонних файлов можно перезаписывать точно так же, как и свои, просто дописывая их после подключения чужих стилей и повышая вес селектора.

Однако в некоторых случаях этот ответ «попадает» в вопрос. Например, если вы подключили слайдер к своей странице, который реализован так, что при переключении слайда JavaScript-ом перезаписываются значения некоторых свойств в CSS.

А вам почему-то надо переопределить эти свойства, проигнорировав изменения самого плагина.

JS может переназначать значения свойств только с помощью inline-стилей. То есть фактически любые свойства, изменённые у элемента с помощью JavaScript, будут просто записаны в атрибут style. С точки зрения механизма специфичности, эти стили более приоритетные, и как бы вы ни повышали вес селектора, вы не сможете перезаписать их.

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

Important во благо

Рассмотрим ещё один случай, который иногда применяют в коде различных библиотек и плагинов.

Если вы откроете исходный CSS-код библиотеки Bootstrap, то увидите, что там разработчики библиотеки очень часто прибегают к использованию импортантов. Возможно, им тоже просто нужно было быстро пофиксить, и они так поступили (сарказм), но вообще этому есть более подходящее объяснение. В этом случае important-ы используются «во благо». Таким образом разработчики Bootstrap «защищают» свой код.

Дело в том, что вы, подключая к своему сайту эту библиотеку, можете переопределять её исходные стили. Таким образом, разработчики перестраховались, и сломать поведение их кода будет сложнее, если вы не знаете, как работает специфичность. Но если вы понимаете, как работает механизм специфичности в CSS, то можете переопределить их импортант, записав свои стили тоже с импортантом, но с более «тяжелым» селектором.

Тем самым мы приходим к второму случаю, когда без импортанта нельзя.
Если вам нужно переопределить important (ваш или из сторонней библиотеки), то вам поможет только !important.

Именно поэтому некорректно говорить: «Я использую импортанты, когда мне нужно переопределить стили сторонних библиотек», правильнее будет сказать: «Я использую импортанты, когда мне нужно переопределить inline-стили или другие !important». И совсем не важно откуда эти стили: из ваших файлов или из сторонних.

Хелперы

В предыдущем абзаце, по сути, описаны все случаи, когда использование импортантов будет нормальным и правильным. Это те случаи, в которых применение импортантов будет неизбежным. Но существуют ещё случаи, в которых использование импортантов будет допустимым, хоть, возможно, уже и не совсем уместным.

Иногда нам необходимы вспомогательные универсальные классы, которые мы используем в своём коде с целью повторного использования кода и некоторого упрощения.
Например, мы создаём какой-то класс .warning, который будем применять к различным элементам на странице, тем самым обозначая их важность.

.warning {
     color: red;
}

И мы хотим, чтобы, применяя этот класс к любому элементу, мы точно делали текст в этом элементе красным. Но ведь у элемента могут быть более приоритетные стили, записанные по более точному селектору, и тогда наш цвет из класса .warning перетрется. В таком случае, добавив important в наш классхелпер, мы делаем его более универсальным, потому что цвет, применяемый в этом классе, будет более приоритетным. Однако сказать, что это хорошо, я не могу. Ведь это делает стили класса более приоритетными, но все равно не гарантирует вам стопроцентной работы, поскольку этот хелпер может столкнуться с другим important, и все равно всё пойдёт не по плану. А потом, когда окажется, что все же в определенном случае этот класс должен делать текст «не таким уж и красным», то вы сразу же «родите» новый селектор с повторением импортанта.

Когда всё таки можно

Правильно и нормально использовать !important, когда вам нужно переопределить inline-стили или другие !important.

Если следовать этому правилу, то выходит, что в обычной верстке, особенно если вы верстаете страницу с нуля, у вас не возникает необходимости использовать импортант вплоть до того момента, пока вы не начинаете подключать сторонние решения к своей странице, но даже это, как мы разобрались выше, не обязательно приводит к их использованию.

Современные методологии вроде БЭМ тоже диктуют свои правила, в которых использование инлайновых стилей или импортантов будет неуместным.

Импортант вам не нужен не потому, что он какой-то загадочный и ужасный, а просто потому, что в большинстве случаев можно обойтись без него.

Все исключения, которые я определил для себя, как правило, сводятся к не очень типичным случаям. Например, у вас может появиться необходимость использовать это, когда вы разрабатываете собственную библиотеку, плагин или браузерное расширение и вам нужно какое-то более приоритетное поведение конкретных стилей. Однако это далеко не про типичное регулярное использование.

When styling elements with CSS, sometimes we can get frustrated that the styling is not applied and using the !important rule can force a CSS snippet to work.
We can use this to force a CSS style. It sometimes work as a quick fix but not always.

This post will go through reasons why using the !important CSS keyword might not be working for you
and their fixes.

The common reasons why !important is not working comes down to:

1. You are using the wrong CSS selector and not targeting the correct element,
2. You are using in animation @keyframes
3. Using !important multiple times and having conflicts

What is the !important keyword?

The !important rule have been around since CSS1 specification in 1991 and allows the user to overrride browser specificity — this just means how a browser
will decide which style to apply to each element.

The following diagram shows how browser will render HTML and display it to the user

Consider the following CSS style where we want to make all fonts in the <blockquote> to be italic:

blockquote * {
    font-style: italic;
}

Now if somehow the above is not working, we can use the !important rule like so:

blockquote * {
    font-style: italic !important; /* Adding important to increase specifity */
}

CSS Specifity — which style gets applied!

CSS specifity just refers to which style the browser will apply to each element. There are quirks amongs browsers but most modern browsers like Chrome, Edge, Safari,
etc generally follow the same rules.

Browsers will use the following order when deciding to apply a style to a specific element — lower down the list gets the highest precedence:

• Browser Styles — each browser (chrome, safari, etc) comes with their own stylesheets. These default styles applied by your browser with the least precedence.
• User Styles — Custom styles created by the brower’s user.
• Author Styles — Styles created by the author/ creator of the website or page.
• !important Author Styles — author styles declared with important keyword.
• !important User Styles — user styles declared with important keyword.
• Inline Styles — inline styles will be given highest precedence and overwrite any styles previously.

Within each of the CSS stylesheets, it then follows the below order — lower down the list is given the most specifity:

• * — wildcard selector
• Type Selectors e.g <p> and Pseudo Elements e.g ::after
• Class Selectors e.g. .container , Attributes Selectors e.g. [target=”_blank”] and Pseudo Classes e.g. :hover.
• ID Selectors e.g. #app
• Inline styles
• !important — this will override any other previous styles

Fix 1 — !important not targetting correct element

The most common reason why using !important CSS rule is not working to style your element is that it is not targetting the correct element.

As an example, consider the following HTML and CSS

<div class="ui-tabs">
    <ul>
        <li class="ui-active">
            <a href="#">Text</a>
        </li>
    </ul>
</div>

.ui-tabs .ui-active {
    background: #084;
    color: blue !important;
}

a:link {
    color: red;
}

Now we can see that that text link <a> is not blue — even though we applied the !important rule to it. The reason this is failing is because we applied the rule
to the wrong element. From the above, we have applied the color blue the list item elements and not link elements.

If we change the CSS to the following:

.ui-tabs .ui-active a:link {
    background: #084;
    color: blue !important;
}

a:link {
    color: red;
}

This will target the link <a> inside the list item <li> element

Fix 2 — !important used in @keyframes

One reason that the !important rule would not work is it only works on cascade properties. The cascade is how browers determine styles from different sources are combined
to be applied for a specific element.

At rules such as the @keyframes do not participate in the cascade and therefore using !important will not work!

As example, consider the following HTML

<div id="mydiv" style="margin-left: 5px"></div>

We then want to animate this <div> using @keyframes as follows:

#mydiv {
    width: 100px;
    height: 100px;
    animation: animateLeft 4s infinite ease-in 1s
}

@keyframes animateLeft {
    0% {
        margin-left: 100px!important
    }
    100% {
        margin-left: 500px
    }
}

The above margin-left: 100px!important will not work, because @keyframes does not interact with the cascade and therefore the margin-left style of the <div> will not be overwritten by the value inside the 0%.

It will stay the same style as the inline style margin-left: 5px. If we remove the !important, then the margin-left: 100px; will be enforced!

#mydiv {
    width: 100px;
    height: 100px;
    animation: animateLeft 4s infinite ease-in 1s
}

@keyframes animateLeft {
    0% {
        margin-left: 100px;
    }
    100% {
        margin-left: 500px
    }
}

💡 Tip — dont use !important in @keyframes!

More information located here:
https://www.w3.org/TR/css-animations-1/#keyframes

Fix 3 — !important used multiple times

The !important rule can be used to override an element’s styles, but it could be used to be overritten by itself. This can happen when you have multiple !important rules
with the same selectors. Consider the following CSS style:

img { border: none !important; }
#article img { border: 2px solid #fff !important; } /* This will be applied*/

The bottom rule that specifies a border around the image will be applied because it has a higher specifity than the more generic top rule!

💡 Tip — matching selectors that are declared lower in the CSS document will take precedence

One thing to keep in mind is that when you have multiple selectors that select the same element, the selector that is at the bottom of the CSS document will be applied!
So for example, lets say we have the following paragraphs and their styles:

<div>
    <p>First paragraph</p>
</div>
<p>First paragraph</p>

p { color: red; }
p { color: blue; }

In the above, all <p> paragraph elements will have text of blue color! Even though we have two matching selectors, CSS style that is lower in the document will take precedence!
To get around this and make the first paragraph color red, we can bump up the specifity declaring the following:

div p { color: red; }
p { color: blue; }

When should you use !important

Best practice is to avoid using !important and use specifity rules instead. This will make your CSS much cleaner and easier to manage. For example, too many important rules
will make you loose track of which one is more important than the other (given the same selector).

However, the important rule can be handy and useful in some use cases:

• Used with user styles to apply the user custom CSS they want to apply for a webpage. This is because we have no control over the CSS that has been loaded.
• Dynamic styles set by JavaScript — to override styles applied by JS on the fly

Browser support

!important has been part of the CSS spec ever since CSS1 in 1991 and browser support for this is good for most modern browsers (chrome, safari, firefox, etc) and even older browsers such as IE (Internet explorer)

Summary

In this post I went over how CSS !important is not working — this can be a quick fix, but not recommended approach!

A checklist of how to troubleshoot why !important is not working is:

1. Check that the !important property is applied correctly to the target element.
2. Determine if the !important is used in at-rules such as @keyframes. This will not work because @keyframes will ignore the cascade
3. Check that important is not used multiple times with your CSS — for example a higher specifity CSS declaration with !important applied will override anything that is less specific

• 9 min read
• Coding,
  CSS,
  Essentials

When the CSS1 specification was drafted in the mid to late 90s, it introduced !important declarations that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part, !important declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration.

Further Reading on SmashingMag:

• CSS Specificity And Inheritance
• Mastering CSS Principles: A Comprehensive Guide
• CSS Specificity: Things You Should Know
• CSS Inheritance, The Cascade And Global Scope

Let’s take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them.

A Brief Primer on the Cascade

Before we get into !important declarations and exactly how they work, let’s give this discussion a bit of context. In the past, Smashing Magazine has covered CSS specificity in-depth, so please take a look at that article if you want a detailed discussion on the CSS cascade and how specificity ties in.

More after jump! Continue reading below ↓

Below is a basic outline of how any given CSS-styled document will decide how much weight to give to different styles it encounters. This is a general summary of the cascade as discussed in the spec:

• Find all declarations that apply to the element and property
• Apply the styling to the element based on importance and origin using the following order, with the first item in the list having the least weight:
  • Declarations from the user agent
  • Declarations from the user
  • Declarations from the author
  • Declarations from the author with !important added
  • Declarations from the user with !important added
• Apply styling based on specificity, with the more specific selector “winning” over more general ones
• Apply styling based on the order in which they appear in the stylesheet (i.e., in the event of a tie, last one “wins”)

With that basic outline, you can probably already see how !important declarations weigh in, and what role they play in the cascade. Let’s look at !important in more detail.

What is Important CSS?

An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has.

Syntax and Description

It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added (thanks to Brad Czerniak for pointing out this discrepancy). Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:

#example {
    font-size: 14px !important; 
}

#container #example {
    font-size: 10px;
}

In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.

Without the use of !important, there are two reasons why the second declaration block should naturally have more weight than the first: The second block is later in the stylesheet (i.e. it’s listed second). Also, the second block has more specificity (#container followed by #example instead of just #example). But with the inclusion of !important, the first font-size rule now has more weight.

Some things to note about !important declarations:

• When !important was first introduced in CSS1, an author rule with an !important declaration held more weight than a user rule with an !important declaration; to improve accessibility, this was reversed in CSS2
• If !important is used on a shorthand property, this adds “importance” to all the sub-properties that the shorthand property represents
• The !important keyword (or statement) must be placed at the end of the line, immediately before the semicolon, otherwise it will have no effect (although a space before the semicolon won’t break it)
• If for some particular reason you have to write the same property twice in the same declaration block, then add !important to the end of the first one, the first one will have more weight in every browser except IE6 (this works as an IE6-only hack, but doesn’t invalidate your CSS)
• In IE6 and IE7, if you use a different word in place of !important (like !hotdog), the CSS rule will still be given extra weight, while other browsers will ignore it

When Should !important Be Used?

As with any technique, there are pros and cons depending on the circumstances. So when should it be used, if ever? Here’s my subjective overview of potential valid uses.

Never

!important declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted. If you use !important out of laziness, to avoid proper debugging, or to rush a project to completion, then you’re abusing it, and you (or those that inherit your projects) will suffer the consequences.

If you include it even sparingly in your stylesheets, you will soon find that certain parts of your stylesheet will be harder to maintain. As discussed above, CSS property importance happens naturally through the cascade and specificity. When you use !important, you’re disrupting the natural flow of your rules, giving more weight to rules that are undeserving of such weight.

If you never use !important, then that’s a sign that you understand CSS and give proper forethought to your code before writing it.

That being said, the old adage “never say never” would certainly apply here. So below are some legitimate uses for !important.

To Aid or Test Accessibility

As mentioned, user stylesheets can include !important declarations, allowing users with special needs to give weight to specific CSS rules that will aid their ability to read and access content.

A special needs user can add !important to typographic properties like font-size to make text larger, or to color-related rules in order to increase the contrast of web pages.

In the screen grab below, Smashing Magazine’s home page is shown with a user-defined stylesheet overriding the normal text size, which can be done using Firefox’s Developer Toolbar:

In this case, the text size was adjustable without using !important, because a user-defined stylesheet will override an author stylesheet regardless of specificity. If, however, the text size for body copy was set in the author stylesheet using an !important declaration, the user stylesheet could not override the text-size setting, even with a more specific selector. The inclusion of !important resolves this problem and keeps the adjustability of text size within the user’s power, even if the author has abused !important.

To Temporarily Fix an Urgent Problem

There will be times when something bugs out in your CSS on a live client site, and you need to apply a fix very quickly. In most cases, you should be able to use Firebug or another developer tool to track down the CSS code that needs to be fixed. But if the problem is occurring on IE6 or another browser that doesn’t have access to debugging tools, you may need to do a quick fix using !important.

After you move the temporary fix to production (thus making the client happy), you can work on fixing the issue locally using a more maintainable method that doesn’t muck up the cascade. When you’ve figured out a better solution, you can add it to the project and remove !important — and the client will be none the wiser.

To Override Styles Within Firebug or Another Developer Tool

Inspecting an element in Firebug or Chrome’s developer tools allows you to edit styles on the fly, to test things out, debug, and so on — without affecting the real stylesheet. Take a look at the screen grab below, showing some of Smashing Magazine’s styles in Chrome’s developer tools:

The highlighted background style rule has a line through it, indicating that this rule has been overridden by a later rule. In order to reapply this rule, you could find the later rule and disable it. You could alternatively edit the selector to make it more specific, but this would give the entire declaration block more specificity, which might not be desired.

!important could be added to a single line to give weight back to the overridden rule, thus allowing you to test or debug a CSS issue without making major changes to your actual stylesheet until you resolve the issue.

Here’s the same style rule with !important added. You’ll notice the line-through is now gone, because this rule now has more weight than the rule that was previously overriding it:

To Override Inline Styles in User-Generated Content

One frustrating aspect of CSS development is when user-generated content includes inline styles, as would occur with some WYSIWYG editors in CMSs. In the CSS cascade, inline styles will override regular styles, so any undesirable element styling that occurs through generated content will be difficult, if not impossible, to change using customary CSS rules. You can circumvent this problem using an !important declaration, because a CSS rule with !important in an author stylesheet will override inline CSS.

For Print Stylesheets

Although this wouldn’t be necessary in all cases, and might be discouraged in some cases for the same reasons mentioned earlier, you could add !important declarations to your print-only stylesheets to help override specific styles without having to repeat selector specificity.

For Uniquely-Designed Blog Posts

If you’ve dabbled in uniquely-designed blog posts (many designers take issue with using “art direction” for this technique, and rightly so), as showcased on Heart Directed, you’ll know that such an undertaking requires each separately-designed article to have its own stylesheet, or else you need to use inline styles. You can give an individual page its own styles using the code presented in this post on the Digging Into WordPress blog.

The use of !important could come in handy in such an instance, allowing you to easily override the default styles in order to create a unique experience for a single blog post or page on your site, without having to worry about natural CSS specificity.

Conclusion

!important declarations are best reserved for special needs and users who want to make web content more accessible by easily overriding default user agent or author stylesheets. So you should do your best to give your CSS proper forethought and avoid using !important wherever possible. Even in many of the uses described above, the inclusion of !important is not always necessary.

Nonetheless, !important is valid CSS. You might inherit a project wherein the previous developers used it, or you might have to patch something up quickly — so it could come in handy. It’s certainly beneficial to understand it better and be prepared to use it should the need arise.

Do you ever use !important in your stylesheets? When do you do so? Are there any other circumstances you can think of that would require its use?

Further Resources

• !important rules in the CSS2.1 spec
• !important Declarations on SitePoint’s CSS Reference
• CSS Specificity And Inheritance on Smashing Magazine
• Everything You Need to Know About !important CSS Declarations
• What are the implications of using “!important” in CSS?

When styling your website, you may apply multiple CSS declarations to the same element. In that case, the browser determines which declarations are the most relevant to an element and applies those.

This relevance — or, specificity — is based on the matching rules of CSS selectors. CSS selectors are modifiers that tell a browser which elements to style with CSS. There are different selector types, each with their own syntax and level of specificity.

However, there is an exception to the rules of CSS specificity. It’s known as the !important rule. Let’s go over a brief recap of the rules of specificity, then take a closer look at the !important rule below. We’ll cover:

• what important means in CSS
• how to use the !important rule 
  • why the !important rule isn’t working

• how to override the !important rule

Recap of CSS Specificity

The following selector types rank from having the highest specificity to the lowest:

1. ID selectors: These select an element based on its ID attribute and have the syntax #idname.
2. Class selectors, attribute selectors, and pseudo-class selectors:
   a) Class selectors select all elements in a CSS class and have the syntax .class name.

   b) Attribute selectors selects all elements that have a given attribute and have the syntax [attr].

   c) Pseudo-class selectors select elements only when in a special state, like visited or hover, and have the syntax selector:pseudo-class.

3. Type selectors: These select all HTML elements that have a given node name and have the syntax element.

Note: The universal selector (*) has no effect on specificity.

If multiple declarations with equal specificity, like a class selector and attribute selector, are made on the same element, then the last declaration (ie. the declaration listed later in the stylesheet) will be applied to the element.

The other major rule to keep in mind when coding the HTML and CSS of your website is the !important rule. This is the exception to all the specificity rules mentioned above. Let’s take a closer look at what it means below.

Although easier than following the many rules of specificity when combining property values, using the !important property is considered a bad practice. That’s because it breaks the natural cascading of stylesheets, which makes maintaining and debugging your website much more difficult.

However, there are specific use cases in which using the !important property is ideal. One such use case is defining utility classes, like the button class.

Say you want any element targeted by the button class to look like the same button: orange background, white font color, solid black border. Without the !important property, you’d use the following code to make a link look like a button.

Here’s the HTML:

 
<a href="#" class="button">Click Me</a>

Here’s the CSS:

 
.button {
background: #FF7A59;
color: #FFFFFF;
padding: 5px;
font-size: 50px;
border-radius: 5px;
border: 2px solid black;
}

Here’s the result:

See the Pen Anchor element with button class by Christina Perricone (@hubspot) on CodePen.

Now let’s say you keep building out your web page. At some point, you add a new section with the ID “content” to your HTML. This section contains another link with the button class. You also add another rule to your CSS, defining all <a> elements with the ID name “content” to have a solid blue border. You’d have the following code.

Here’s the HTML:

 
<a href="#" class="button">Click Me</a>
<section id="content">
<p> text text blah <a href="#" class="button">Click Me</a> </p>
</section>

Here’s the CSS:

 
.button {
background: #FF7A59;
color: #FFFFFF;
padding: 5px;
font-size: 50px;
border-radius: 5px;
border: 2px solid black;
}
#content a {
border: 4px solid #00A4BD;
}

Here’s the result:

See the Pen xxgQYKq by Christina Perricone (@hubspot) on CodePen.

Because an ID selector has a higher specificity than a class selector, the CSS style of the selector #content a takes precedence over the CSS style of the selector .button. That’s why the second <a> element has a solid blue border, not a solid black one.

A scenario like this is inevitable, whether you’re building a site from scratch or using a framework like Bootstrap CSS. The larger the volume of code you’re working with, the harder it is to keep track of the specificity of your CSS selectors.

You can avoid the style inconsistencies of the above-mentioned scenario on your site by using the !important property. Let’s look at how exactly to use this property below.

Using the !important rule in CSS is easy. You just have to add !important at the end of the line, immediately before the semicolon. So the syntax would be:

 
   element {
style property !important;
}

Let’s take a look at how the CSS for the example above changes when adding the !important rule.

CSS Important Example

For this example, you want any element targeted by the button class to look like the same button: orange background, white font color, solid black border. 

The problem is that you have some anchor elements (or links) defined by the button class and an ID name. In your CSS, elements with this ID name will have a solid blue border. Since ID selectors are more specific than class selectors, these anchor elements will be styled like a button with a orange background and white font color — but they’ll have a solid blue border instead of solid black. 

You don’t want that type of inconsistent styling on your site. So you’ll use the !important rule when specifying the CSS for the button class. 

The HTML stays the same:

 
<a href="#" class="button">Click Me</a>
<section id="content">
<p> text text blah <a href="#" class="button">Click Me</a> </p>
</section>

The CSS becomes:

 
.button {
background: #FF7A59 !important;
color: #FFFFFF !important;
padding: 5px !important;
font-size: 50px !important;
border-radius: 5px !important;
border: 2px solid black !important;
}
#content a {
border: 4px dotted #00A4BD;
}

The result is:

See the Pen CSS Important Example by Christina Perricone (@hubspot) on CodePen.

You’ll notice how both <a> elements look identical thanks to the !important rule.

CSS Important Not Working

Let’s say you use the !important rule in your CSS, but the elements aren’t styled as you want them to. There are only a couple reasons the !important rule would not work.

First, the !important rule will not work in the author’s stylesheet if it is being used in the user’s stylesheet. The author stylesheet is supplied by the author of the web page. The user stylesheet is supplied by the user of the browser.

By default, CSS rules in an author’s stylesheet override those in a user’s stylesheet. However, to create a balance of power between authors and users, !important rules in a user stylesheet will override !important rules in the author’s stylesheet. This CSS feature is designed for accessibility. Users that need larger fonts, specific color combinations, or other requirements due to disabilities related to vision can maintain control over the presentation of a web page.

It also possible that you have added !important to a CSS rule set that is overridden by another CSS rule set with the !important rule later in the stylesheet. You may have done this on accident, which would explain why important is not working — or you may want to do this on purpose. 

Let’s say you change your website’s color scheme or you don’t want all elements with the button class to look the same. Whatever the reason, you may want to override the !important rule in your CSS. Let’s look at how below.

Why do these two methods work? Because of the rules of specificity. When two declarations using the !important rule are applied to the same element, the declaration with a greater specificity or the declaration defined last will be applied. You might remember these rules from the introduction, but it’s important to understand they apply to declarations using the !important rule as well as declarations not using the rule.

Rather than override the !important property in CSS with another !important property, it is ideal to rewrite the rule and avoid using the property altogether. But sometimes this isn’t possible.

Take user stylesheets, for example. Using a custom user stylesheet, a reader can override styles of the website according to their wishes. A reader might, for example, increase the font size or change the color of typography on the page to enable them to see the content better.

Since a user-defined stylesheet will override an author stylesheet regardless of specificity, a reader might be able to add CSS rules without the !important tag. However, if the author stylesheet is using the !important rule to define its font size or color, then the !important rule will be necessary in the user stylesheet.

Let’s continue using the same button example from above. Say, my website already had the !important rules applied to the button class. But now I do want all <a> elements with the ID name “content” to have a solid blue border.

I should simply rewrite the code, removing all !important tags from my CSS. But let’s say I’m on a time crunch and looking for a quick fix. Then I could simply add the !important tag to the CSS ID selector. Then both declarations would be using the !important property and, because ID selectors have a higher specificity then class selectors, the <a> element in the content section would have a solid blue border.

The HTML stays the same:

 
<a href="#" class="button">Click Me</a>
<section id="content">
<p> text text blah <a href="#" class="button">Click Me</a> </p>
</section>

The CSS becomes:

 
.button {
background: #FF7A59 !important;
color: #FFFFFF !important;
padding: 5px !important;
font-size: 50px !important;
border-radius: 5px !important;
border: 2px solid black !important;
}
#content a {
border: 4px dotted #00A4BD !important;
}

The result is:

See the Pen Example 1 of Overriding !Important Rule by Christina Perricone (@hubspot) on CodePen.

The !important rules essentially cancel each other out. So since the ID selector has a higher specificity than a class selector, the second <a> element has a solid blue border, not a solid black one.

You can also override the !important rule by using a CSS selector of the same specificity, but placing it later in the stylesheet.

Let’s say I want all buttons on my website to have a solid blue border. Again, I should simply rewrite the code but I can use the !important tag for a quick fix. Using the same class selector .btn with a new rule for the solid blue border and an !important tag, I can simply add it after the existing rule in the stylesheet. Because it comes later, it has higher specificity and will be applied to elements with the .btn class.

The HTML stays the same:

 
<a href="#" class="button">Click Me</a>
<section id="content">
<p> text text blah <a href="#" class="button">Click Me</a> </p>
</section>

The CSS becomes:

 
.button {
background: #FF7A59 !important;
color: #FFFFFF !important;
padding: 5px !important;
font-size: 50px !important;
border-radius: 5px !important;
border: 2px solid black !important;
}
.button {
border: 4px solid #00A4BD !important;
}

Here’s the result:

See the Pen Example 2 of Overriding !Important Rule by Christina Perricone (@hubspot) on CodePen.

Using the !important Property in your CSS

While !important declarations should rarely be used in code, it’s still necessary to understand what this property is and how to use it. Maybe you’ll need to use the !important rule in your user stylesheets. Maybe you’ll take over a website that contains instances of the rule. Whatever the reason, becoming familiar with the !important property is useful step in learning HTML and CSS.

Editor’s note: This post was originally published in May 2020 and has been updated for comprehensiveness.

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

p {
  color: red !important;
}
#thing {
  color: green;
}

<p id="thing">Will be RED.</p>

.button {
   background: red; 
   color: white;
   padding: 3px;
   border-radius: 5px;
   border: 1px solid black;
}

<a class="button" href="#">Do Thing</a>

<section id="content">
   <p>text text blah <a href="#" class="button">Do Thing</a></p>
</section>

#content a {
  border-bottom: 1px dotted blue;
}

.button {
   background: red            !important;
   color: white               !important;
   padding: 3px               !important;
   border-radius: 5px         !important;
   border: 1px solid black    !important;

   /* For good measure */     
   text-decoration: none      !important;
}