Is possible to make an important property value from CSS selector a non important one?

Question

Is possible to make an important property value from CSS selector a non important one?

---

For example: Bootstrap 3 defines .hide class as:

 .hide { display: none !important; }

Is possible to remove the important value without modifying the BS3 source code?

Thinking at somethingl iike

 .hide { display: none !remove-important; }

---

Note that I want to keep the same value! I don't want to set block !important to .hide class because that would not be correct...

I already added a new class .hide-non-important and used it where it was needed:

 .hide-not-important { display: none; }

...but the question is: is there any alternative to this?

Answer 1

You don't need to edit the original source code. Just create a stylesheet and place it after the Bootstrap stylesheets and add this to it:

 .hide { display: block !important; }

Now, having said this, I would be very careful about doing this. You don't know how many elements across your site have applied this class, and you will almost certainly get unanticipated results.

There is obviously a reason that this class has been applied, I would suggest either:

1. don't do this

2. add some other class to the element and add styles to that. Adjust your markup (or use js to apply the class if need be) to something like:

   <div class="hide custom-hide-reset"></div>
   

   Then add this style to the stylesheet you've created:

   .custom-hide-reset { display: none; }
   

Answer 2

You can overwrite this with:

 body .hide { display: none !important; }

 .someclass.hide { display: none !important; }

those two examples have higher priority