CSS !important

❮ Prev Next ❯

Specificity does not matter if a rule ends with !important : 


p {
  font-size :20px !important;
}

That rule will take precedence over any rule with more specificit

Adding !important in a CSS rule is going to make that rule be more important than any other rule, according to the specificity rules. The only way another rule can take precedence is to have !important as well, and have higher specificity in the other less important slots.

Tips

In general you should use the amount of specificity you need, but not more. In this way, you can craft other selectors to overwrite the rules set by preceding rules without going mad.

!important is a highly debated tool that CSS offers us. Many CSS experts advocate against using it. I find myself using it especially when trying out some style and a CSS rule has so much specificity that I need to use !important to make the browser apply my new CSS.

But generally, !important should have no place in your CSS files.

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>

      .name {
        color :red;
      } 

      #name {
        color :purple;
      } 

      p {
        color :brown !important;
      } 
      
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
    <div class="container">
      <p>Test</p>
      <p class="name">Test</p>
      <p id="name">Test</p>
      <p style="color:yellow;">Test</p>
    </div>
  </body>
</html>

Using the idattribute to style CSS is also debated a lot, since it has a very high specificity.

A good alternative is to use classes instead, which have less specificity, and so they are easier to work with, and they are more powerful (you can have multiple classes for an element, and a class can be reused multiple times).

❮ Prev Next ❯