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

i'm learning css , have result want if use ! important; specification. don't understand why can't override property inheriting 1 class , overriding 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 if use above style button:

<button id="add_question" class="extra-questions minor-action">{% trans "lägg till ny" %}</button>

then wouldn't have use ! important; statement , override work without it, doesn't. missing? can please me understand why doesn't work without ! important statement, or show me way without ! important; ?

its not entirely correct isnt overridden because set in class above, in instance isnt due order of less - isnt being overridden because have listed classes in wrong order- instead of

extra-questions minor-action

you need do

minor-action extra-questions

when denoting classes, if share values same property settings- values last class applied take precedence.

alternatively, can add more specificity classes, in less, nest extra-questions within minor-action , prefix &. mean order of classes in html not matter, combination does. output css be:

.minor-action.extra-questions

also, sure aware, using !important should avoided