Not being able to override external scss file with !important tag

Question

I've been trying to build a page that has external SCSS files. I was having no trouble overriding specific elements with !important until now. I know this question is popular here. I've gone through

This answer How to override external css marked as !important? ,

this How to override external css?

this How to overwrite SCSS variables when compiling to CSS

and some other, but none of them seem to work for my case.

My goal is to set a change of colors of my boxes through CSS @keyframe timer (or any other method that can work), BUT there's a color rule set as !important in a external SCSS file. I was able to override it once by also adding a !important in MY local css, to get to the base color I wanted, but the color change seems not to work and not be able to override those two !important s, even with higher specificity and so on. I'll provide the parts of the code that are important for this question:

Theme styles:

<link rel="stylesheet" href="box2.css">
<link rel="stylesheet" href="http://shipping.mambo.com.br/shipping-store/views/_includes/dist/css/adminlte.min.css">

The box I'm using:

<div href="#" id="boxMaster" class="small-box bg-info" class="box-PEDIDO" tabindex="0">
      <a class="nmroPedido small-box-header" id="header" href="#"></a> <a class="float-right" id="dataEntrega"></a>
      <hr>

      <div class="inner">
        <p id="nomeproduto"></p>
      </div>
      <div class="icon">
        <i class="fas fa-shopping-cart" id="carrinho"></i>
      </div>
      <hr id="footer" class="baixoHr" tabindex="-1">
      <a class="small-box-footer" tabindex="-1">   

      </a>
    </div>

and my local CSS:

     .row .info-box .info-box-icon {
    font-size: 20px;
    cursor: pointer; 
    
    height: 115px;
    width: 30px;
  }
   .box-PEDIDO {
    height: 135px;
    width: 423px;
    cursor: pointer;
  }

  .card-title {
    font-weight: bolder;
  }
  
  

  

  .row {
  height: max-content;
}


hr#antigo {
  border: 0;
  height: 25px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, rgb(0, 0, 0), #ccc);
}







/* NOVO */


body #preparando .small-box  {
  width: 423px;
  height: 160px;
  cursor: pointer;
  margin-right: 11px;
  
}

 html body div #preparando .small-box {
  background-color: var(--bs-success) !important;
}




#preparando:focus-within .small-box:focus-within {
  background-color: #29923f !important;
}

#prontos .small-box {
  width: 423px !important;
  height: 160px !important;
  cursor: pointer;
  margin-right: 11px;
  background-color: var(--bs-dark) !important;

}
 
.small-box-footer {
  position: absolute !important;
  bottom: 0px;
  width: 423px !important;
  text-align: right !important;
  margin-right: 5px !important;
  font-size: 13px;
  font-weight: 250 !important;
  background: none !important;
  cursor: default;
  
  
}

 h3 {
  font-size: 1.2rem !important;
  font-weight: lighter !important;
  
}

.h3qtd {
  position: relative;
  margin-top: -37px !important;
  margin-left: 10px !important;
}

p {
  font-size: 1.3rem !important;
  word-wrap: break-word;
  height: 90px;
  margin-top: 4px !important;
  position: absolute;top: 65px;
  width: 250px;
  line-height: 27px;
  margin-left: 12px;
  font-weight:500;
}

.inner {
  height: 42px;
  margin-top: -30px;  /*Altura da "quantidade", ajustar dps*/
}

#header {
  font-family: "Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 11px;
  margin-left: 5px;
  padding: 8px 0;
  height: 20px;
  font-weight: 200;
  display: inline-block;
}

#dataEntrega {
  font-size: 13px;
  margin-top: 4px;
  margin-right: 5px;
}

.small-box .icon > i {
  position:absolute; top: 50px !important;
}




hr {
  position: relative; bottom: -9px !important;
  width: 423px !important;
}

.baixoHr {
  position: relative; top: 74px;
}

.nroPedHead {
  display: inline-block;
  position: relative;
  
}


.nmroPedido-0 {
 margin-top: -72px !important;
 position: absolute !important;
 margin-left: 5px;
 font-size: 0.75rem;
  
}

.float-right {
  margin-top: -71px;
  margin-right: 5px;
  font-size: 13px;
     
}



#preparando div .small-box .bginfo {
    animation: change 10s step-end both !important;
}

@keyframes change {
    to   { background-color: var(--bs-warning) !important }
}

where the important parts lie in html body div #preparando .small-box { background-color: var(--bs-success) !important; } (where it works even without all that specification)

and the most bottom part

#preparando div .small-box .bginfo {
    animation: change 10s step-end both !important;
}

@keyframes change {
    to   { background-color: var(--bs-warning) !important }
}

Note: the color change keyframes work for other elements in the page, but is NOT able to change the color of the box.

How can I make it work? Thank you in advance.

Edit: MRadev 's answer does work and triggers the color change, with every element BUT .bg-info (which is the background of the box), because of that !important in external CSS file I believe.

Still trying to find a way to work around that. Set MRadev's lines to each element won't work because of the remainders of green from .bg-info background that bleeds through the colors of the elements.

Answer 1

Your problem lies in the !important statement that is embeded inside of a key. "!important" inside of keyframe is ignored. Please refer to:

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#!important_in_a_keyframe

And

https://rules.sonarsource.com/css/RSPEC-4655

This shouldnt be the problem you want to solve, but rather the need to use !important. Usually that would mean you have a badly structured styles. (I do get what you are trying to do with the overwriting the library.

Maybe your best solution would be using JS animations instead of the CSS ones in your case. Or maybe think in another direction and avoid the animation all together as your example works perfectly if you do not use the animation, but overwrite the "background-color" directly and as mentioned in the upper answer - have your "!important" be loaded first so the library one is ignored.

Shown here with your code:

// Smallbox:
.small-box > .inner {
    animation: change 2s step-end both;
}

// Outher box
.bg-info {
 background-color: yellow !important;
}

@keyframes change {
    to   { background-color: red}
}


@import url("https://cdn.jsdelivr.net/npm/admin-lte@3.1/dist/css/adminlte.min.css")

https://codepen.io/Rbx/pen/zYdrvRP?editors=1100

Answer 2

This is the problem with libraries using !important in their styles; it is very hard to be overridden. It would be impossible for the browser to assume which !important tag is more important than another !important tag, so it just takes the first one. The only way to do this is to make your style targeting more specific than the library.

For instance, if the library is setting !important on an element based on class name, then you can use an ID target in your CSS to make it "more specific" (IDs are supposed to only be set on a single element, so it is considered the most specific form of targeting).

The only other way to override a third party !important tag is to make sure your CSS loads first with its own !important tag on that particular style. Then when the library styles load, it won't be able to override yours.

An example in code:

html body div #preparando .small-box { // This is targeted by class name
     background-color: var(--bs-success) !important;
}

html body div #preparando .small-box#someID { // This is targeted by ID which is more specific
     background-color: var(--bs-success) !important;
}