Problems with css :not() attribute

Question

I’m having a problem I’m editing a h2with css and within that h2 has a span but wanted to apply the style in h2but I don’t want style to apply to my span I’m using the selector :not(span) but it doesn’t work follow my code:

html

<div class="text-center box-product band-product">
                        <h2>Quero<br>anunciar meu<br><span>produto</span></h2>
                        <a href="#" title="Saiba mais">Saiba mais <i class="fas fa-arrow-right"></i></a>
                    </div>

SCSS:

.box-product{
        background-color: $light-gray;
        h2:not(span){
            line-height: 30px;
            @include gradient-orange(#f97c16, #feb226);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            span{
                color: $gray;
                font-weight: normal;
                font-family: "good_vibes", sans-serif;
                font-size: 2em;
                text-transform: capitalize;
            }
        }
    }

notice that the color I’m applying to h2 is applying in my span tbm do not want it as I can resolve follow the image

Answer 1

Dude I think you just ended up complicating things with the not() needlessly.

See in the example below how you can fix the problem just by coming back with the color of the text on span thus -webkit-text-fill-color: gray;

.box-product{
    background-color: #000;
}
.box-product h2 {
    line-height: 30px;
    background-image: linear-gradient(#f97c16, #feb226);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.box-product h2 > span {
    color:gray;
    font-weight: normal;
    font-family: "good_vibes", sans-serif;
    font-size: 2em;
    text-transform: capitalize;
    -webkit-text-fill-color: gray;
    background-image: linear-gradient(gray, gray);
    -webkit-background-clip: text;
}

<div class="text-center box-product band-product">
    <h2>Quero<br>anunciar meu<br><span>produto</span></h2>
    <a href="#" title="Saiba mais">Saiba mais <i class="fas fa-arrow-right"></i></a>
</div>

---

I’ll leave an example here in case you want to better understand the selector :not().

In the example below I have a tag <h1> and inside it I have two more tags a <span> and a <label>, ai I used not dial to color everything inside the h1, except the span.

Notice that what’s inside the h1 is the son of h1, then use h1:not() means that "all the h1 not ( css rule)", Ex: if you do this h1:not(.tit) {color: red} all H1 turn red, except for the class .tit

Take the example:

body {color: green;}
h1 {color: blue;}
h1 > *:not(label) { color: red; }

/* todos P ficaram azul, menos o com a classe .tit*/
p:not(.tit) {
    color: aqua;
}

<h1>text H1 
    <span class="classico">tag span</span>
    <label>tag label</label>
</h1>
<p>Mais um texto<p>
<p class="tit">Mais um texto<p>
<p>Mais um texto<p>