Multiple :not pseudos not working as intended - html

Question

A normal website menu with decently sized buttons comprised of centred listed text inside blocks with background-color.
I need the buttons to change their background-color when hovered over, when pressed, and when the user is on the respective page.
HTML of the menu:
<div class="box box-menu">
<ul class="nav">
<li class="button button-activated">Home</li>
<li class="button">Gallery</li>
<li class="button">Commission Us</li>
<li class="button">Official Staff</li>
<li class="button">FAQ / TOS</li>
<li class="button button-last">Contacts</li>
</ul>
and its stylesheet:
.box-menu{
position: relative;
float: left;
width: 200px;
}
.nav{
text-align: center;
}
.button{
height: 70px;
list-style-type: none;
background-color: #141414;
color: #e8a53c;
font-size: 20px;
line-height: 60px;
vertical-align: middle;
text-shadow: 2px 2px black;
margin-bottom: 10px;}
.button-last{
margin-bottom: 0;
}
.button:hover:not(.button-activated):not(.button:active) {
background-color: #141414;
color: #901313;}
.button:active{
background-color: #761111;
}
.button-activated{
background-color: #901313;
color: #e8a53c;
}
:active is for the button as its being clicked.
button-activated is the class for the currently selected page.
A little needlessly confusing, but whatever.
I want the Activated button to NOT change color when its being hovered over.
I want the rest of the buttons to change color when they're being hovered over.
When the user presses a button, I want its :active (being clicked on) background-color - NOT its :hover background-color (since the user has his mouse on top of the button as he's pressing it).
One way I thought of resolving it was to use :not pseudos, but whenever I write multiple of them in one line the whole thing stops working altogether... It should work like:
"Button should change bg-color on hover - UNLESS it's being clicked on, and UNLESS it's specified as the page you're on."
Am I doing something wrong? Do I need to write them separately, one :not at a time?

Answer 1

The problem is not that you have multiple :not(), but that your second one is invalid.
In current CSS Selectors Level 3 specification1, not() only accepts simple selectors, and .button:active is a complex selector so your not(.button:active) is invalid and the whole rule is discarded.
But in your case, you really don't need that complex selector here, the simple :active will do, which gives you .button:hover:not(.button-activated):not(:active).
Here is a much simpler example still exposing the issue:
.foo:not(.bar):not(.foo:hover) { /* does not work */
color: red;
}
.foo:not(.bar):not(:hover) { /* does work */
background-color: green;
}
<div class="foo">hover me to remove stylings</div>
1 - Though next version 'CSS Selectors Level 4' now makes not()'s param a selector-list, so if I got it right, we should soon be able to pass complex selectors here.

Answer 2

With multiple css classes it's better to list with comma separation, rather than chaining them, as you've done with your pseudo-classes here.
.button:hover:not(.button-activated),
.button:hover:not(.button:active) {
background-color: #141414;
color: #901313;
}
However, with more complex classes and code in general, descriptive is often more useful than efficiency. Separating these own might be the way to go and still be functional, after having plugged this into a CodePen:
.button:hover:not(.button-activated) {
background-color: #141414;
color: #901313;
}
.button:hover:not(.button:active) {
background-color: #141414;
color: #901313;}