Question 411191 in Html Question posted in
Some basic documentation can be found here.

Html – Not understanding the !important keyword in CSS

I need some help with figuring out how the !important keyword in CSS works.

.button {
  font-size: 20px;
  color: white;
  background-color: green;
}

.div1 {
  background-color: blue;
}

#nav.pullright {
  background-color: red !important;
  font-size: 30px !important;
}

.div2 {
  background-color: yellow;
}
<div class="div1">
  I am on top
</div>
<button id="nav" class="pullright">
   No,no,no,I am on Top
</button>

My question is why is the background color for "I am on top" blue? Why are the #nav and .pullright background color blue? I am confused as to how the !important keyword works. I think that the [#nav .pullright] should be red because of the ID and class properties are more specific.

I am a newbie to client-side coding, any and all answers are welcome.

Tags:

3

Answers


  1. 0

    First, .button and .div2 don’t exist in your HTML, as a heads up.

    I am confused as to how the !important keyword works

    !important says to CSS, "forget specificity, apply this style!" It’s the nuclear option. I hardly ever use it. See What does !important mean in CSS?

    My question is why is the background color for "I am on top" blue?

    That’s the .div1 element. Its background is blue because .div1 {background-color: blue}

    Why are the #nav and .pullright background color blue?

    #nav and .pullright are the same element: #nav.pullright.

    That element’s background is not blue, it is red. It is red because of #nav.pullright {background-color: red !important}. In fact, you don’t actually need that !important rule there at all.

    Generally, it is recommended to avoid using ID selectors like #nav and the !important flag in your CSS if you can avoid it. Both make it hard to overrule that CSS later, which you wind up doing a lot even on small sites. See: https://cssguidelin.es/#specificity

    Here’s a rewrite of your code removing the unused CSS and reducing the specificity by removing the ID selector and !important flag:

    .div1 {
  background-color: blue;
}

.pullright {
  background-color: red;
  font-size: 30px;
}
    <div class="div1">
  I am on top
</div>
<button id="nav" class="pullright">
   No,no,no,I am on Top
</button>
    Login or Signup to reply.
  2. 0

    My question is why is the background color for "I am on top" blue?

    Because the class you have applied to this element is "div1".
    .div1 has a background color property of blue.

    Why are the #nav and .pullright background color blue?

    It is not blue unless you are hallucinating.

    I am confused as to how the !important keyword works. I think that the
    [#nav .pullright] should be red because of the ID and class properties
    are more specific.

    Your content in #nav .pullright is already red.

    The !important rule in CSS is used to add more importance to a property/value than normal. It will override ALL previous styling rules for that specific property on that element.

    Login or Signup to reply.
  3. 0

    I do not understand why the nav div is blue on your end. It is red on my end and the div of class div1 is blue.

    Edit: Perhaps it is something with your browser cache? (I don’t really know.)

    The !important CSS keyword.

    The !important CSS keyword overwrites future rules in CSS. To understand this, we must understand how CSS styles a webpage.

    Let’s say I have something that makes the color of div1 blue and then we overwrite it with something that makes the color of div1 red. Here’s a snippet:

    .div1 {
  background-color: blue;
}

.div1 {
  background-color: red;
}

#nav {
  background-color: red;
}
    <div class="div1">I am on top</div>
<div id="nav" class="pull-right">No,no,no,I am on top</div>

    What color is div1 now? It is red, right? If you thought so, you’d be right. Now let’s try it with the important keyword.

    .div1 {
  background-color: blue !important;
}

.div1 {
  background-color: red;
}

#nav {
  background-color: red;
}
    <div class="div1">I am on top</div>
<div id="nav" class="pull-right">No,no,no,I am on top</div>

    Now what color is div1? It is now blue. Why is this? This is because although CSS uses the latest and greatest rule and uses the last known color, we overwrite that with the important selector.

    This means that future rules cannot overwrite it. Unless the next rule is important also. Here is an example:

    .div1 {
  background-color: blue !important;
}

.div1 {
  background-color: red !important;
}

#nav {
  background-color: red;
}
    <div class="div1">I am on top</div>
<div id="nav" class="pull-right">No,no,no,I am on top</div>

    Now, because both are important, the latest important rule overwrites the previous ones.

    I hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search