Using a multiple class selector on the one element

I came across the situation the other day where I wanted to apply a CSS rule when two classes appeared in the same element. The Html generated was a div containing buttons. I wanted to apply a custom background to one of the items in the list.

The Rendered Html 

As you hover over each of the button elements JavaScript toggled the button-hover class.

<div class="buttons"
    <button class="button-1">Okbutton> 
    <button class="button-2 button-hover">Cancelbutton> 
div> 

I wanted to have background image change on all of the list elements when button-hover was applied. The problem was I wanted to have a custom roll over images for each of the buttons.

The CSS

After a some re-reading of the CSS rules, the solution turned out to be quite straight forward. I could use the attribute value selector to test for the second class.

.buttons .button-1[class~="button-hover"
    backgroundred
.buttons .button-2[class~="button-hover"
    backgroundgreen