CSS specificity for elements with more than one class - css

Question

I am having an issue where I am unable to get the level of specificity I need to make some code work. I have a <ul> for which I want to make the backgrounds of the <li>'s change when hovered on with a fancy little slide-in animation.
I managed to get it working pretty well using a linear-gradient with a transition on :hover. I decided that I wanted to have the different list items have different background colors than each other, so I added three classes: .red, .blue, and .gold, and I figured I would just make everything with the .level1 class have the required properties other than the linear gradient itself—namely, background-size: 200% 100%, background-position:right bottom, and transition:all 1s ease, and then specify the linear gradient and color for each individual color class. I know this is all pretty intangible, but I will post my code below.
Here is what I was hoping to have (or something like 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 that doesn't work. For the values in the first class to take effect, I have to get rid of the first one body .push [class^="level1"] { ... } and put that information in the three color-specific ones, like
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 any way to consolidate that information?

Answer 1

It seems the problem is not specificity, but that your shorthand background: declaration is overwriting the position & size values in your original declaration. Try changing background: to background-image: in your 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%);
}

Answer 2

I am guessing you have html like:
...
<li class="level1">...</li>
<li class="level1 red">...</li>
<li class="level1 gold">...</li>
<li class="level1 blue">...</li>
In that case you can change your code to
.push .level1 {
background-size: 200% 100%;
background-position:right bottom;
transition:all 1s ease;
}
.push .level1:hover {
background-position:left bottom;
}
.push .blue {
background-image: linear-gradient(to right, #282e59 50%, rgba(0,0,0,0) 50%);
}
.push .red {
background-image: linear-gradient(to right, #94272a 50%, rgba(0,0,0,0) 50%);
}
.push .gold {
background-image: linear-gradient(to right, #e5d037 50%, rgba(0,0,0,0) 50%);
}