html - how to set !important on a multi value css transform? -
i want undo older css transform
applied element , set new rule. in css regularly use !important
in such cases override higher priority rule, looks !important
not taking effect on transform property:
.mk-flipbox-front { -webkit-transform: translatex(100%); transform: translatex(100%); }
i want override to:
.mk-flipbox-front { -webkit-transform: translatex(100%) rotatey(0deg); transform: translatex(100%) rotatey(0deg); }
but when use !important
this:
transform: translatex(100%) rotatey(0deg) !important;
it breaks , not work.
any chance can use !important
on multiple value transform
?
don't use !important
instead more specific, , use parent selector (or sibling selector) override it
something 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 !important
rule not working because of css specificity and/or css inheritance
Comments
Post a Comment