How can I make it so that CSS uses a class only if another is not present on an element?

Question

I have the following CSS classes:

button.current {
   background-color: #000;
}
button:hover {
   background: #0007d5;
}

How can I make it so the background color does not change for the second button? In other words I want the current and the hover to one work if there's not an additional class of "inactive" on the button.

<button class="current">Show the current background</button>
<button class="current inactive">Show the current background</button>

Answer 1

You can use the :not() pseudo-class:

button.current:not(.inactive) {
   background-color: #000;
}
button:hover:not(.inactive) {
   background: #0007d5;
}

jsFiddle Demo