!Important Property in CSS

Back to: CSS Tutorials for Beginners and Professionals

!Important Property in CSS with Examples

In this article, I am going to discuss !Important Property in CSS with Examples. Please read our previous article where we discussed More on CSS Selectors with Examples.

!Important Property in CSS

The !important property in CSS is used to provide more weight (importance) than normal property. In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon.

It overwrites specificity and all other selectors, that’s super important. It overwrites all these things and therefore, this specific declaration would always be applied. We shouldn’t really use important. In most cases, it’s not a good idea to use it because we’re overwriting something that’s backed into CSS, which quickly leads to bad code.

Syntax:

!Important Property in CSS

Example to Understand !Important Property in CSS

Let us understand the use of !Important Property in CSS with an example. In our previous article, we have learned how to apply two classes to the same element. For a better understanding, please have a look at the below example. Here we have applied both active and inactive classes to the same paragraph element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Course</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <style>
 .active{
   		color:green;
 }

 .inactive{
   		color:red;
 }
    </style>
</head>
<body>
<main>
  <section class="product-overview">
     <h1>
        <p class="active inactive "> Paragraph with more than one classes!</p>
     </h1>
  </section>
</main>
</body>
</html>
Output:

Example to Understand !Important Property in CSS

When you run the above code, you will see that the style of the inactive class gets applied. Why? Simply because it comes later in the style sheet. But let’s suppose I want this paragraph to be in green color anyway? How to achieve this is by simply using the !important rule.

Example using !important Rule in CSS

In the below example, we have applied the !important rule with the active classes which gives this class more importance and it will override all previous styling rules for that specific property on that element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Course</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <style>
 .active{
   		color:green !important;
 }

 .inactive{
   		color:red;
 }
    </style>
</head>
<body>
<main>
  <section class="product-overview">
     <h1>
        <p class="active inactive "> Paragraph with more than one classes!</p>
     </h1>
  </section>
</main>
</body>
</html>
Output:

Example using !important Rule in CSS

As you can see in the above output, now the green color is applied. The !important rule overrides the color property.

How to Override !important in CSS?

The only way to override an !important rule in CSS is to include another !important rule on a declaration with the same (or higher) specificity and here the problem starts. This makes the CSS code confusing and the debugging will be hard, especially if you have a large style sheet. Let us understand this with an example. Here we have created a simple example. It is not very clear when you look at the CSS source code, which color is considered most important.

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  color: blue !important;
}

.myclass {
  color: green !important;
}

p {
  color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>
Output:

How to Override !important in CSS?

Note: It is good to know about the !important rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to.

Use Cases of !important Rule in CSS:

One way to use the CSS !important rule is if you have to override a style that cannot be overridden in any other way. This could be if you are working on a Content Management System (CMS) and cannot edit the CSS code. Then you can set some custom styles to override some of the CMS styles.

Another way to use the CSS !important Rule is that assume you want a special look for all buttons on a page. Here, buttons are styled with a red background color, white text, and some padding 10px and 2px solid black border. For a better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: Red; 
  color: white;
  padding: 10px;
  border: 2px solid black; 
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
</br>
<p>Standard button: <a class="button" href="/html/">HTML Tutorial</a></p>

</body>
</html>
Output:

Use Cases of !important Rule in CSS

The look of a button can sometimes change if we put it inside another element with higher specificity, and the properties get in conflict. For a better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: red; 
  color: white;
  padding: 10px;
  border: 2px solid black; 
}

#myDiv a {
  color: gray;
  background-color: yellow;  
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="CSS.ASP">CSS Tutorials</a></p>

<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorials</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">JavaScript Tutorials</a></p>
</div>

</body>
</html>
Output:

!Important Property in CSS with Examples

In order to force all buttons in the page to have the same look, we can add the !important rule to the properties of the button. For a better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: red !important; 
  color: white !important;
  padding: 10px !important;
  border: 2px solid black !important; 
}

#myDiv a {
  color: gray;
  background-color: yellow;  
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="CSS.ASP">CSS Tutorials</a></p>

<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorials</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">JavaScript Tutorials</a></p>
</div>

</body>
</html>
Output:

!Important Property in CSS with Examples

Note: The !important property in CSS means that all subsequent rules on an element are to be ignored, and the rule denoted by !important is to be applied. This rule overrides all previous styling rules. The !important property increases its priority.

Specificity:

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.

Note: Browsers consider specificity after determining cascade origin and importance. In other words, for competing property declarations, specificity is relevant and compared only between selectors from the one cascade origin and layer that has precedence for the property. Order of appearance becomes relevant when the selector specificities of the competing declarations in the cascade layer with precedence are equal.

How is specificity calculated?

Specificity is an algorithm that calculates the weight that is applied to a given CSS declaration. The weight is determined by the number of selectors of each weight category in the selector matching the element (or pseudo-element). If there are two or more declarations providing different property values for the same element, the declared value in the style block having the matching selector with the greatest algorithmic weight gets applied.

The specificity algorithm is basically a three-column value of three categories or weights – ID, CLASS, and TYPE – corresponding to the three types of selectors. The value represents the count of selector components in each weight category and is written as ID – CLASS – TYPE. The three columns are created by counting the number of selector components for each selector weight category in the selectors that match the element.

Selector weight categories

The selector weight categories are listed here in the order of decreasing specificity:

  1. ID column: Includes only ID selectors, such as #example. For each ID in a matching selector, add 1-0-0 to the weight value.
  2. CLASS column: Includes class selectors, such as .myClass, attribute selectors like [type=”radio”] and [lang|=”fr”], and pseudo-classes, such as :hover, :nth-of-type(3n), and :required. For each class, attribute selector, or pseudo-class in a matching selector, add 0-1-0 to the weight value.
  3. TYPE column: Includes type selectors, such as p, h1, and td, and pseudo-elements like ::before, ::placeholder, and all other selectors with double-colon notation. For each type or pseudo-element in a matching selector, add 0-0-1 to the weight value.
  4. No value: The universal selector (*) and the pseudo-class :where() and its parameters aren’t counted when calculating the weight, but they do match elements. The value for both the universal selector and the pseudo-class is 0-0-0; these selectors do not impact the specificity weight value.
  5. Combinators: Combinators such as +, >, ~, ” “, and ||, may make a selector more specific in what is selected but they don’t add any value to the specificity weight.

In the next article, I am going to discuss :not() Pseudo Class in CSS with Examples. Here, in this article, I try to explain !Important Property in CSS with Examples. I hope this !Important Property in CSS with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *