Mohsenr1 Mohsenr1 - 5 months ago 8
CSS Question

how to set !important on a multi value css transform?

I want to undo older css

transform
applied to an element and set new rule.
In css we regularly use
!important
in such cases to override the higher priority rule, but it looks like
!important
is not taking effect on a transform property:

.mk-flipbox-front {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}


I want to override this to:

.mk-flipbox-front {
-webkit-transform: translateX(100%) rotateY(0deg);
transform: translateX(100%) rotateY(0deg);
}


but when I use
!important
like this:

transform: translateX(100%) rotateY(0deg) !important;


It breaks and will not work.

Any chance we can use
!important
on a multiple value
transform
?

Answer

Don't use !important

Instead be more specific, and use a parent selector (or even a sibling selector) to override it

something like this:

.mk-flipbox-front {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
.parent .mk-flipbox-front {
  -webkit-transform: translateX(100%) rotateY(0deg);
  transform: translateX(100%) rotateY(0deg);
}
<div class="parent">
  <div class="mk-flipbox-front">test</div>
</div>

If your !important rule is not working is because of CSS specificity and/or CSS inheritance