Is there a way to fall back to a non-pseudo-class style in CSS?

Question

If I have a blue div that someone else owns the code for

.stuff {
  background-color: blue;
}

And I want it to be red on hover

.stuff:hover {
  background-color: red;
}

But then I want to be able to add a class for it to go back to its non-pseudo-class state:

.stuff.otherclass:hover {
  background-color: unset; /* Want blue in this case */
}

Is there a CSS option of going back to a pre-pseudo-class state?

Codepen demo: http://codepen.io/anon/pen/EyEWww

Answer 1

The only way to roll back the cascade is using the revert keyword, but it rolls back to another origin.

There is no way to make the 2nd value in the output of the cascade become the cascaded value, ignoring the winner.

Instead, you can modify your selector and use the :not() pseudo class:

.stuff {
  background-color: blue;
}
.stuff:not(.otherclass):hover {
  background-color: red;
}

Or, alternatively, take advantage of .stuff.otherclass:hover having more specificity than .stuff:hover

.stuff, .stuff.otherclass:hover {
  background-color: blue;
}
.stuff:hover {
  background-color: red;
}