The denotation !important takes precedence when styles are applied. If you ensure a match with the initial declaration, ie the same path to the element that receives the style, you can apply an extra style using a CSS class and you can subscribe to the first important statement by the second: p>

The plugin uses:

.foo div label {
    width: 100px !important;
}

You should use the same and apply an extra style, for example making use of a class of CSS:

.foo div label.sub-conjunto {
    width: 150px !important;
}

In this way, since you are applying a style in the same style as the plugin , the fact that you have the CSS class will create the subscription you want and the width will be 150px instead of 100px for elements label with .sub-conjunto .

Namely: On this subject, there is a @Sergio answer a> that deepens the hierarchical operation of CSS.

The important statement serves to determine that a certain property has priority regardless of the order in which they appear in the style sheet, so in the above situation, where two statements conflict, even though the first statement occurs before the second, the first have preference.

In the example below the second selector is more specific and declared later, but the first rule will be applied because of the! important statement.

p {margin-left: 5px !important}
#id p {margin-left: 10px}

When two selectors have the important statement and conflict with each other, the last selector will have priority, so you need to insert your style sheet after the plugin stylesheet.

p {margin-left: 5px !important}
#id p {margin-left: 10px !important}

Furthermore, when two or more declarations apply to the same element and are the same property, the one with the highest specificity will be applied (if it has the same specificity, the one that happens later will be applied). In this way the ideal in your case is to add in your label a class, so that the following is possible:

.suaclasse {
    some: value !important
}

In this way the desired elements can be accessed with greater specificity.

Dude, try to increase the specificity of your declaration, in this example I'll put body , but it can be an element before as div , .class or #id .

Plugin Css:

.foo div label {
     width: 150px !important;
}

Your Css:

body .foo div label {
    width: 100px !important;
}

CSS - Cascading Style Sheets

The CSS is rendered by hierarchy, ie the last ones overlap the previous ones, ie in the example:

p {color:red;}
p {color:blue;}

<p class="cor">Texto azul</p>

The rendered color will be blue , but the type of the selector is also taken into account, such as:

p.cor {color:red;}
.cor  {color:blue;}

<p class="cor">Texto vermelho</p>

Even if the last selector is set to blue, the text will still be red because the previous one is more specific. But in the case of !important :

.cor  {color:blue !important;}
p.cor {color:red;}

<p class="cor">Texto azul</p>

Even if the selector is more specific, the rule set to !important will be rendered, however:

p.cor {color:red !important;}
.cor  {color:blue !important;}

<p class="cor" id="texto">Texto vermelho</p>

If both rules are set to !important , the rule will be rendered with the most specific selector.

Example

p { color:blue;}
.importante{color:red;}
span.importante{color:gray;}
#importante{color:green;}

<p>Normal</p>
<p class="importante">Importante</p>
<span class="importante">Span Importante</span>
<p class="importante" id="importante">
    Especificamente Importante
</p>
<p class="importante" id="importante" style="color:#35C !important;">Importantissimo</p>

So if you want to override the rule:

.bar label {
    width: 100px !important;
}

Use:

<tag>.bar label {
    width: 150px !important;
}

  

In this case, the <tag> of the example is the tag that contains the .bar class. That is, if it is a div then it gets div.bar label {...} .

Ps .: It is always good to have your CSS well structured, so it will be rare situations where you will need to use the !important attribute.