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

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -