css3 - CSS specificity for elements with more than one class -

css3 - CSS specificity for elements with more than one class -

i having issue unable level of specificity need create code work. have <ul> want create backgrounds of <li>'s alter when hovered on fancy little slide-in animation.

i managed working pretty using linear-gradient transition on :hover. decided wanted have different list items have different background colors each other, added 3 classes: .red, .blue, , .gold, , figured create .level1 class have required properties other linear gradient itself—namely, background-size: 200% 100%, background-position:right bottom, , transition:all 1s ease, , specify linear gradient , color each individual color class. know pretty intangible, post code below.

here hoping have (or it):

body .push [class^="level1"] { background-size: 200% 100%; background-position:right bottom; transition:all 1s ease; } body .push [class^="level1"]:hover { background-position:left bottom; } body .push .level1.blue { background: linear-gradient(to right, #282e59 50%, rgba(0,0,0,0) 50%); } body .push .level1.red { background: linear-gradient(to right, #94272a 50%, rgba(0,0,0,0) 50%); } body .push .level1.gold { background: linear-gradient(to right, #e5d037 50%, rgba(0,0,0,0) 50%); }

but doesn't work. values in first class take effect, have rid of first 1 body .push [class^="level1"] { ... } , set info in 3 color-specific ones,

body .push .level1.blue { background: linear-gradient(to right, #282e59 50%, rgba(0,0,0,0) 50%); background-size: 200% 100%; background-position:right bottom; transition:all 1s ease; } body .push .level1.red { background: linear-gradient(to right, #94272a 50%, rgba(0,0,0,0) 50%); background-size: 200% 100%; background-position:right bottom; transition:all 1s ease; } body .push .level1.gold { background: linear-gradient(to right, #e5d037 50%, rgba(0,0,0,0) 50%); background-size: 200% 100%; background-position:right bottom; transition:all 1s ease; }

is there way consolidate information?

it seems problem not specificity, shorthand background: declaration overwriting position & size values in original declaration. seek changing background: background-image: in overwrites:

body .push .level1.blue { background-image: linear-gradient(to right, #282e59 50%, rgba(0,0,0,0) 50%); } body .push .level1.red { background-image: linear-gradient(to right, #94272a 50%, rgba(0,0,0,0) 50%); } body .push .level1.gold { background-image: linear-gradient(to right, #e5d037 50%, rgba(0,0,0,0) 50%); }

css3 css-specificity memory-efficient