More important than important

Question

My style sheets declare formatting for a class more or less like this:

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

This comes from a plugin. I would not like to change the plugin’s style sheets, but rather add my own sheets to overwrite the formats.

It turns out that in a certain case, I wish to have Labels with longer lengths. I tried something like:

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

I thought this would be more specific and so it would be the formatting that would be worth at the end. I was wrong. If I overwrite with the entire selector, it will alter cases that I would like to leave intact. But my own statement will not overwrite the CSS of the specific case.

Is there any way to declare a formatting as more important than important? Something like:

.bar label {
    width: 150px !important !urgent !emergency !runToTheHills;
}

Answer 1

The denotation !important takes precedence when styles are applied. Content, if you guarantee a match to the initial statement, that is, the same path to the element that receives the style, you can thus apply an extra style using a CSS class and you can subscribe to the first important statement for the second:

The plugin uses:

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

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

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

This way, as you are applying a style in the same "path" as the style applied by 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 the elements label with .sub-conjunto.

---

^{Namely: On this subject, there is a reply by @Sergio that deepens the hierarchical functioning of the CSS.}

Answer 2

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

In the example below the second selector is more specific and declared later, but the first rule will be applied due to declaration ! Important.

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

When two selectors have the important statement and conflict with each other, the selector that happened last will take priority, so it is necessary that you insert your stylesheet after the plugin’s stylesheet.

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

Still, when two or more statements apply to the same element and set the same property, the one with the highest specificity will be applied (if it has the same specificity, the one that happens will then be applied). So the ideal in your case is to add a class to your label, so that the following is possible:

.suaclasse {
    some: value !important
}

This way the desired elements can be accessed with greater specificity.

Answer 3

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

Css of the Plugin:

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

Your Css:

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

Answer 4

CSS - Cascading Style Sheets

CSS is rendered by hierarchy, that is, the last ones will overlap the previous ones, that is 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 in red, since 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 defined as !important, however:

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

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

If both rules are defined as !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 case the <tag> of the example is the tag containing the class .bar. That is, if it is a divthen stay div.bar label {...}.

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