Creep2DJ Creep2DJ - 2 months ago 17
CSS Question

:not() Not Functioning Correctly

I have a navbar made up of a

and some
elements, as shown below:

@import url(;

.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"><a href="#" class="header-nav-element-link">Home</a></li>
<li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Bio</a></li>
<li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Stances</a></li>
<li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Solutions</a></li>

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?


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.