:not() Not Functioning Correctly - css

Question

I have a navbar made up of a ul and some li and a elements, as shown below:
/*Fonts*/
#import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);
/*Header*/
.header-wrapper {
background-color: #696969;
height: 53px;
width: 100%;
top: 0;
margin: 0;
padding: 0;}
.header-nav {
background-color: darkblue;
top: 0;
height: 48px;
margin: 0;
padding: 0;
list-style-type: none;}
.header-nav-element {
float: left;}
.header-nav-element-logo {
height: 48px;}
.header-nav-element-link {
display: block;
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: "Libre Baskerville", serif;
transition-duration: 0.3s}
.active {
background-color: #696969;}
.header-nav-element-link:hover:not(.active) {
background-color: #808080;}
<div class="header-wrapper">
<ul class="header-nav">
<li class="header-nav-element noselect"><img src="../img/indexlogo.JPG" alt="" class="header-nav-element-logo"></li>
<li class="header-nav-element noselect active">Home</li>
<li class="header-nav-element noselect">Bio</li>
<li class="header-nav-element noselect">Stances</li>
<li class="header-nav-element noselect">Solutions</li>
</ul>
</div>
As you can see, the active tab is lighting up on hover, even though I have specified not to. Why is this happening, and how can I fix it?

Answer 1

It's because your :not(.active) is being applied to the a but the active class is on its parent, the li
You could fix it by doing this -
.header-nav-element:not(.active):hover .header-nav-element-link
Or by modifying the HTML by moving the active class to the element with the class header-nav-element-link.

Answer 2

As per the MDN documentation of :not():
This selector only applies to one element; you cannot use it to exclude all ancestors.
.header-nav-element is ancestor of .header-nav-element-link.
Change:
.header-nav-element-link:hover:not(.active) {
background-color: #808080;}
to:
.header-nav-element:hover:not(.active) {
background-color: #808080;}
Corrected snippet:
.header-nav {
background-color: darkblue;
top: 0;
height: 48px;
margin: 0;
padding: 0;
list-style-type: none;
}
.header-nav-element {
float: left;
}
.header-nav-element-logo {
height: 48px;
}
.header-nav-element-link {
display: block;
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: "Libre Baskerville", serif;
transition-duration: 0.3s
}
.active {
background-color: #696969;
}
.header-nav-element:hover:not(.active) {
background-color: #808080;
}
<ul class="header-nav">
<li class="header-nav-element noselect"><img src="../img/indexlogo.JPG" alt="" class="header-nav-element-logo"></li>
<li class="header-nav-element noselect active">Home</li>
<li class="header-nav-element noselect">Bio</li>
<li class="header-nav-element noselect">Stances</li>
<li class="header-nav-element noselect">Solutions</li>
</ul>