CSS specificity for elements with more than one class

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%);
}