Why should I use! important in this case?
I am learning CSS and I have the result I want, but only if I use the BOM ! important;
. I don't understand why I can't override a property that inherits one class and override the 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 this style for the button:
<button id="add_question" class="extra-questions minor-action">{% trans "Lägg till ny" %}</button>
then I wouldn't have to use an operator ! important;
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 instructions ! important
, or show me a way to do it without ! important;
?
source to share
It is not entirely true that it is not overridden because it is set in the class above, in which case it is not related to the order of your LESS - it is not overridden because you specified your classes in the wrong order - instead of
extra-questions minor-action
You need to do
minor-action extra-questions
When naming classes, if they share values for the same property settings, those values for the last applied class will take precedence.
Alternatively, you can add more specificity to your classes, in your LESS, nest extra-questions
inside, minor-action
and prefix with &
. This will mean that the order of the classes in your HTML doesn't matter, it's a combination. The output CSS will be:
.minor-action.extra-questions
Also, since I'm sure you know, !important
source to share
The override will work if you do
.minor-action{
margin-top: 0em;
}
You haven't applied styles to .extra-questions
, but to .minor-action
. its truth you refer to the same element. but this is how the cascade works.
This will help: How to override CSS class properties using another CSS class
source to share
Your example works without! important - http://jsfiddle.net/sgguap7v/
This does not work! important without this 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 higher weight than.minor-action {}
source to share
The css rule is applied depending on the order you call it, and even more so specific.
if you have 2 rules governing margin-top
Then the browser has to decide which one to apply. To do this, it reads your css file from top to bottom and calculates the priority of each rule based on the next one.
- Priority 1: #id (Id is a unique selector, so very important)
- Priority 2: .class (then class they are less important than ID but still)
- Priority 3: element (finally, the general style that gets most overridden is your default style)
Every time you add a nested selector, it also adds to precedence:
body.class
more important than .class
, and body #id
more important body.class
, etc.
Finally, if rules end up with the same priority, the latter applies.
setting a flag !important
in your code is a way to artificially raise the priority for a particular rule. But if you end up with the same rule with !important
, then the precedence rules will apply.
source to share
Your first selector is more specific, it refers to elements that are children of the form, and it just overrides the most general (second) that applies to any of your .yourclass regardless of its position in the document hierarchy. you can get rid of the severity by choosing the .yourclass form instead.
source to share