How to override !important CSS rules generated by a script

Question

i have a plugin in js from external services. This script has built its own css, but its rules doesn't fit in my layout. So i need to change 540 with 700px:

#chat-container.bbhorizontal .main .booking {
margin-top: 0;
min-width: 540px !important;
}

Path from Bugzilla:

<div class="main">
    <form name="chat">
      <div class="booking">

I have tried:

#div main.chat.booking {
display: block;
visibility: visible;
min-width: 800px !important important;
margin-top: 0;
}

No success... How i can achieve this? Thank you.

I prefer programming in C that css. UPDATE see the picture please:

You will get the answer in the duplicated post. Your current syntax is incorrect BTW, You cannot give more priority for the value with double important. You can try increasing the specificity by adding one more element for your selector or use your current rule after the already existing rule. — m4n0, Nov 10 '15 at 11:27
Thanks to the fast signaling! But I've already tried that solution does not work for me! I think I can ask a question without being clawed by careful hawks. Thank you Mate — sundsx, Nov 10 '15 at 12:07

LDJ · Answer 1 · 2015-11-10T11:40:41.870

2

Add more specificity to the selector:

#chat-container.bbhorizontal .main form[name="chat"] .booking {
  min-width: 700px !important;
}

That should do the trick...

edited Nov 10 '15 at 11:40

answered Nov 10 '15 at 11:27

LDJ

6,896
9
52
87

At the moment, `chat` is the value of `name`, not `class`, so the HTML needs modification. For completeness, your answer should show that. – Marc Audet Nov 10 '15 at 11:32
Specificity is the route. simply add `body .classname` – Henrik Petterson Sep 14 '17 at 15:58

Joseph Khella · Answer 2 · 2015-11-10T11:45:27.687

0

.main form .booking[style]{
    display: block;
    visibility: visible;
    min-width: 700px !important;
    margin-top: 0;
}

jquery

$("#chat-container.bbhorizontal .main .booking").css("min-width","700px !important");

edited Nov 10 '15 at 11:45

answered Nov 10 '15 at 11:26

Joseph Khella

695
1
9
26

try changing it by jquery then although i can't find a reason why it won't work .. see updated answer – Joseph Khella Nov 10 '15 at 11:44

score 0 · Answer 3 · answered Nov 10 '15 at 11:31

You just need a more specific selector than the one that you wish to override and to also use !important.

For example:

html #chat-container.bbhorizontal .main .booking {
   min-width: 800px !important;
}

The html in the selector is the important bit. That makes this selector more specific than the one your script is generating.

NB: You don't have to use html, I just knew that it would work because everything is always beneath an html element.

Plaesa can you look the picture on question update? Thank You — sundsx, Nov 10 '15 at 11:43

How to override !important CSS rules generated by a script

3 Answers3