How to increase priority without using !important?

Question

How to increase priority without using !important?

252 Views Asked by personal_cloud At 18 December 2022 at 18:47

How do I get rid of the !important tag in the following example?

<html><head><style>

  .class1.class2::after {
    content: ".class1.class2";
  }
  .class3::after {
    content: ".class3" !important;
    /* how do we make this higher priority without "!important"? */
  }
  

td {padding-right: 20px;}

</style></head>
<body>

<table>
<tr><td>class1 class2</td><td><div class="class1 class2"></div></td></tr>
<tr><td>class1 class2 class3</td><td><div class="class1 class2 class3"></div></td></tr>
</table>

</body></html>

I am aware of 3 rule precedence mechanisms in CSS:

Specificity. The issue with the above example is that according to the browser's specificity algorithm, .class1.class2 is considered more "specific" than .class3. So specificity is not a good fit here, since the browser invents an illogical relationship between .class1.class2 and .class3.
Declaration order appears not to work either: since specificity takes precedence over declaration order, it does not matter what order the rules are written in.
!important. But it is frowned upon (if you can educate me on why it's frowned upon, that might give us some insight). Can I avoid !important if I want .class3 to take higher precedence in the example above?

Original Q&A

There are 2 best solutions below

Michael Benjamin On 18 December 2022 at 19:09

The important flag (!important) is "frowned upon" by some because it is often used as a substitute for good coding practices.

It can be seen as encouraging sloppy code because, in the end, "we can just use !important".

Eventually, however, this practice results in problems like these: How to override !important?

But if you're already writing good quality code, or you're trying to override code that is beyond your control (e.g., WordPress), or you need to make a change in one page, but not the whole site, then the important flag can be a handy tool.

Bottom line, there's nothing wrong with !important when used properly. It exists for a reason.

**Jordan** · Accepted Answer · 2022-12-18T18:56:17.857000

As you've already mentioned, it comes down to Specificity. You can modify your CSS to make the .class3 entry more specific and add-on the original selector .class1.class2.class3::after, .class3::after.

.class1.class2.class3 will override .class1.class2 because the former contains the latter.

I think that !important is frowned upon purely because it's seen like a bit of a hack/workaround to force a particular style in the absence of properly formatted and written CSS.

<html>

<head>
  <style>
    .class1.class2::after {
      content: ".class1.class2";
    }
    
    .class1.class2.class3::after,
    .class3::after {
      content: ".class3";
    }
    
    td {
      padding-right: 20px;
    }
  </style>
</head>

<body>

  <table>
    <tr>
      <td>class1 class2</td>
      <td>
        <div class="class1 class2"></div>
      </td>
    </tr>
    <tr>
      <td>class1 class2 class3</td>
      <td>
        <div class="class1 class2 class3"></div>
      </td>
    </tr>
  </table>

</body>

</html>

How to increase priority without using !important?

There are 2 best solutions below

Related Questions in CSS

Related Questions in CSS-SELECTORS

Related Questions in CSS-SPECIFICITY

Trending Questions

Popular # Hahtags

Popular Questions