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