How to override important

Question

I have created a custom style sheet that overrides the original CSS for my Wordpress template  However  on my calendar page  the original CSS has the height of each table cell set with the  important declaration   td  height  100px  important    Is there some way I can override this

User · Answer

I would like to add an answer to this that hasn t been mentioned  as I have tried all of the above to no avail  My specific situation is that I am using semantic-ui  which has built in  important attributes on elements  extremely annoying   I tried everything to override it  only in the end did one thing work  using jquery    It is as follows       active   css  cssText    border-radius  0px  important

User · Answer

Okay here is a quick lesson about CSS Importance  I hope that the below helps   First of all the every part of the styles name as a weighting  so the more elements you have that relate to that style the more important it is  For example   P1  Page  height 100px     is more important than    Page  height 100px     So when using important  ideally this should only ever be used  when really really needed  So to overide the decleration  make the style more specific  but also with an override  See below   td  width 100px  important   table tr td  override  width 150px  important     I hope this helps

User · Answer

This can help too  td style   height  50px  important     This will override any inline style

User · Answer

In any case  you can override height with max-height

User · Answer

The  important should only be used when you have selectors in your style sheet with conflicting specificity   But even when you have conflicting specificity  it is better to create a more specific selector for the exception  In your case it s better to have a class in your HTML which you can use to create a more specific selector which doesn t need the  important rule   td a-semantic-class-name   height  100px      I personally never use  important in my style sheets  Remember that the C in CSS is for cascading  Using  important will break this

User · Answer

Disclaimer  Avoid  important at all cost   This is a dirty  dirty hack  but you can override an  important  without an  important  by using an  infinitely looping or very long lasting  animation on the property you re trying to override the importants on    x000D   x000D   keyframes forceYellow   x000D    from   x000D      background-color  yellow  x000D      x000D    to   x000D      background-color  yellow  x000D      x000D    x000D   x000D  div   x000D    width  100px  x000D    height  100px  x000D    margin  0 auto  x000D    background  red  important  x000D    animation  1s linear infinite forceYellow  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

Override using JavaScript      mytable td   attr  style    display  none  important      Worked for me

User · Answer

Overriding the  important modifier   Simply add another CSS rule with  important  and give the selector a higher specificity  adding an additional tag  id or class to the selector  add a CSS rule with the same selector at a later point than the existing one  in a tie  the last one defined wins     Some examples with a higher specificity  first is highest overrides  third is lowest    table td     height  50px  important    myTable td  height  50px  important    myTable td  height  50px  important     Or add the same selector after the existing one   td  height  50px  important     Disclaimer   It s almost never a good idea to use  important  This is bad engineering by the creators of the WordPress template  In viral fashion  it forces users of the template to add their own  important modifiers to override it  and it limits the options for overriding it via JavaScript   But  it s useful to know how to override it  if you sometimes have to

[css] How to override !important?

Examples related to css