Problems with attribute: css not ()

Question

Problems with attribute: css not ()

Navigation

#1 by (1 votes)

1

I'm having a problem editing a h2 with css and within that h2 has a span but wanted to apply the style in h2 but I do not want the style to apply to my span I'm using the :not(span) selector for this however does not 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 am applying in h2 is applying in my span tbm I do not want this as I can solve it follows the image

html css3 css-seletores scss

asked by anonymous 11.05.2018 / 16:31

1 answer

How to return the second lowest value in java? Add opacity between menu and background

score 1 · Answer 1

Dude, I think you ended up making things worse with not() .

See in the example below how you can correct the problem by just returning with the color of the text in 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 if you want to better understand the :not() selector.

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

Note that what is inside h1 is child of h1 , so using h1:not() means that all h1 not (css rule) , Ex: if you do this h1:not(.tit) {color: red} all h1 is red, minus what has class .tit

See 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>