CSS - !important

In CSS, the notation !important is a special way to give a CSS declaration precedence over other competing rules that apply to the same selector. This declaration is used to give a CSS rule higher specificity and priority, which means that it will override other conflicting styles, even if those styles have higher specificity or are defined later in the stylesheet.

  • An exclamation mark (!) followed by the word important (without space) tells the browser to prioritize that style above all others.

  • This rule changes how the browser chooses which rules to follow. A rule without this special attention is called normal.

  • It's essential that !important is the very last element in the declaration, just before the terminating semicolon.

    This placement is especially important, when it comes to properties that allow values containing multiple keywords, such as font property.

Syntax

selector {
   property: value !important; 
}

CSS !important - Basic Example

The following example demonstrates the use of !important, where we override the base styles by redefining the .box class with new styles:

<html>
<head>
<style>
    /* Base styles */
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 10px;
    }
    /* Override styles using !important */
    .box {
        background-color: blue !important;
        margin: 20px !important;
    }
</style>
</head>
<body>
    <div class="box"><h2>DEMO BOX<h2></div>
</body>
</html>

  • Keep in mind that while !important can be handy in specific cases, it's best to use it only when truly needed.

  • Using !important too frequently can make your code harder to manage and debug.

  • It's a good practice to rely on proper CSS specificity and structure to prevent the excessive use of !important.

CSS !important - Impact On The Cascade

The cascade is an algorithm that defines how user agents combine property values originating from different sources. You can read more on this here.

Those rules or properties marked !important are given higher weight than those that are not. If two rules apply to an element, and one is marked !important, the important rule wins out.

There are three origins: author, reader, and user agent. You can read more about this here.

Under normal circumstances, the author's styles win out over the reader's styles. !important reader styles are stronger than any other styles, including !important author styles. Both author and reader styles override the user agent's default styles.

There are five levels to consider in terms of declaration weight. In order of most to least weight, these are:

  • Reader important declarations

  • Author important declarations

  • Author normal declarations

  • Reader normal declarations

  • User agent declarations

CSS !important - Transitions

However transitions are exception. CSS transitions control the speed of property changes. During these transitions, a property does not match a particular important declaration, so transitions are the only aspect that can override !important declarations.

Following example demonstrates how CSS transitions can override the !important rule, allowing for smooth and visually appealing effects on web pages.

<html>
<head>
<style>
   .box {
      width: 200px;
      height: 200px;
      background-color: red;
      transition: background-color 2s;
   }
   .box:hover {
      background-color: blue !important;
   }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

CSS !important - Inline Styles

Inline styles are those that you add directly to HTML elements with the style attribute. These styles can be basic or important. Basic inline styles are stronger than other basic styles, regardless of where they're defined.

!important inline styles are stronger than !important site styles, but not as strong as user or browser styles .However, special transitions in styles can override !important inline styles.

Following example demonstrates this:

<html>
<head>
<style>
    p#bright {color: silver;}
    p {color: black !important; }
</style>
</head>
<body>
    <p style="color:red !important">Welcome to Tutorialspoint!</p>
</body>
</html>

CSS !important and Specificity

As per CSS rules, if conflicting declarations apply to an element and they all have the same weight, they should be sorted by specificity, with the most specific declaration winning out. But in case the property is declared important, then no matter how high the selector specificity matches a normal declaration, an important declaration from the same source and cascade layer will always have precedence.

When two important declarations from the same origin and layer apply to the same element, browsers select and use the declaration with the highest specificity as demonstrated below. Here the color of text is red:

<html>
<head>
<style>
    #demo-para p {
        color: green !important;
    }
    p {
        color: red !important;
    }
</style>
</head>
<body>
    <p id="demo-para">Welcome to Tutorialspoint! </p>
    <p>A place to find all courses!</p>
</body>
</html>

CSS !important - Impact on shorthand property

When you use !important with a shorthand property, it also applies importance to all its individual properties. The following examples are identical.This example:

p {
    background: red !important;
}

The above style is equivalent to:

h2 {
   font-variant : normal !important;
   font-weight : bold !important;
   font-size : 15px !important;
   font-family : "Times New Roman", Times, Serif !important;
}

CSS !important - Impact on Custom property

When you add !important to a custom property, it means that this value is really important. But after setting it, the !important part is removed from the value. The !important flag is not passed as part of the custom property value to the var() function.

The following code demonstrates impact of !important on custom property:

<html>
<head>
  <style>
    :root {
      --primary-color: blue !important;
      --primary-color: red ;
    }

    .box {
      background-color: var(--primary-color) ;
      width: 200px;
      height: 200px;
    }
    p {
        color: var(--primary-color);
      }
  </style>
</head>
<body>
  <div class="box"></div>
  <p>Welcome to Tutorialspoint! </p>
</body>
</html>

CSS !important - Override

The following example demonstrates how the !important rule can override another !important rule for the same property. It allows you to control the specificity and priority of CSS styles. When you run this program, you will see that the text inside the <div> is red, the text inside the first <span> is blue, and the text inside the second <span> is green.

<html>
<head>
<title>!important Overrides !important</title>
<style>
    .demo-important-text {
        color: red !important;
    }

    .demo-important-text span {
        color: blue !important;
    }

    .demo-important-text span span {
        color: green !important;
    }
</style>
</head>
<body>
    <div class="demo-important-text">
        This sentence should be red.
        <span>
            This sentence should be blue.
            <span>
                This sentence should be green.
            </span>
        </span>
    </div>
</body>
</html>
Advertisements