:not is doing opposite of its actual usage

Question

So basically, I wanted to make a section with image as background. On top of it is text. The problem is; I tried every single way to put image as new <div.> or <img.>(using dots so it doesn't dissapear in post as code) but the only way it let's me style an image is if I put it as background of "main" div. Now I wanted to do hover animation but the problem is that it also changes text opacity and text color, not just background. When I was googling the problem it says that I should use ":not(*insert child class name)" and it won't alter it. The problem is the following code:

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px;
    background-image: url(Images/Lavender\,\ Main\,\ Section\ 1\,\ Main\ Header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.main:hover :not(main__container) {
    color: black;
    opacity: 0.9;
    transition: all 0.3 ease;

}

As you can see I tried using :not and in theory it should work fine. The problem is: It does the opposite. Instead of putting hover animation on "main" without "main__container" it changes text aka "main__container" but not "main" background...

Every help is appreciated.

score 0 · Accepted Answer · answered Jan 29 '21 at 21:12

When using pseudo selectors you can't leave spaces between the class and the pseudo reference. inside the :not you additionally need to provide the . or # May be worth noting that using a class inside of the :not psuedo isn't fully supported in older browsers ( where as referencing a html element is )

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    border:1px solid rgb(50,50,50);
  
}

.main:hover:not(.main__container) {
    color: black;
    opacity: 0.9;
    transition: all 0.3 ease;
    background-color:red;

}

<main class='main'></main>
<main class='main main__container'></main>

:not is doing opposite of its actual usage

1 Answers1