Why do I have to use ! important in this case? - css

Question

I'm learning CSS and I have the result I want but only if I use the ! important; specification. I don't understand why I can't override a property inheriting one class and overriding a property.
form button.minor-action,
#profile-left a.action,
.minor-action {
display: inline-block;
background: #lightBlue;
color: white;
padding: 0 1.2em;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
text-decoration: none;
text-align: center;
font-weight: bold;
border: none;
height: 25px;
margin-top:1.0em;
line-height:25px;
white-space: nowrap;
&:visited {
color: white;
}
&:hover, &:active, &:focus {
background-color: darken(#lightBlue, 10%);
text-decoration: none;
}
&.call-to-action {
background-color: #pink;
&:hover, &:active, &:focus {
background-color: darken(#pink, 10%);
text-decoration: none;
}
}
}
.extra-questions {
margin-top: 0em !important;
}
I thought that if I use the above style for a button:
<button id="add_question" class="extra-questions minor-action">{% trans "Lägg till ny" %}</button>
then I wouldn't have to use the ! important; statement and the override would work without it, but it doesn't. What am I missing? can you please help me understand why it doesn't work without the ! important statement, or show me a way do to it without ! important; ?

Answer 1

Its is not entirely correct that it isnt overridden because its set in the class above, in this instance it isnt due to the order of your LESS - it isnt being overridden because you have listed your classes in the wrong order- instead of
extra-questions minor-action
You need to do
minor-action extra-questions
When denoting classes, if they share values for the same property settings- those values for the last class applied will take precedence.
Alternatively, you can add more specificity to your classes, in your LESS, nest extra-questions within minor-action and prefix with &. This will mean the order of classes in your HTML does not matter, the combination does. The output CSS will be:
.minor-action.extra-questions
Also, as I am sure you are aware, using !important should be avoided

Answer 2

Your example works without !important - http://jsfiddle.net/sgguap7v/
It does not work !important without that case -
1. The rule is to follow the class - .extra-questions {} .minor-action {}
2. The rule has a higher weight - button.minor-action {} It has a greater weight than .minor-action {}

Answer 3

The css rule are applied depending on the order you call them, and the more specific they are.
if you have 2 rules defining the margin-top The browser then have to decide which one to apply. To do that it read your css file from top to bottom and calculate the priority of each rules based on the following.
Priority 1: #id (Id are unique selector so very important)
Priority 2: .class (Then the class they are less important than ID but still )
Priority 3: element (Finally generic style that is overridden most of the time, this is your default style)
Each time you add a nested selector it add to the priority as well so:
body.class is more important than .class and body #id is more important than body.class etc...
Finally if the rules ends up with the same priority, the last one is apply.
setting the !important flag in your code is a way to artificially boost the priority to a particular rule. But if you end up having the same rule with !important then the priority rules above will apply.

Answer 4

Override Will Work if You Do
.minor-action{
margin-top: 0em;
}
You didn't apply any styles to .extra-questions but to .minor-action. its true you apply to a same element. but cascade just work like that.
This will help: How to override the properties of a CSS class using another CSS class
And This: http://www.w3.org/TR/CSS2/cascade.html#cascade

Answer 5

Because its already set in the class above .minor-action, if it's set it doesn't override unless you use !important

Answer 6

Your first selector is more specific, it applies to elements that are children of a form, and it just overrides the most general (the second one) which applies to any of your .yourclass regardless of its position in the document hierarchy. you can get rid of the important by selecting form .yourclass instead.