1

estou com um problema estou editando um h2com css e dentro desse h2 tem um span porem queria aplicar o estilo no h2porem não quero que o estilo se aplique no meu span estou usando o seletor :not(span) para isso porem não funciona segue meu código:

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;
            }
        }
    }

percebam que a cor que estou aplicando no h2 está se aplicando no meu span tbm não quero isso como posso resolver segue a imagem inserir a descrição da imagem aqui

1 Resposta 1

1

Cara eu acho que vc acabou complicando as coisas com o not() sem precisar.

Veja no exemplo abaixo como vc pode corrigir o problema apenas voltando com a cor do texto no span assim -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>


Vou deixar aqui um exemplo caso vc quera entender melhor o seletor :not().

No exemplo abaixo eu tenho uma tag <h1> e dentro dela tenho mais duas tags uma <span> e uma <label>, ai eu usei o seletor not para colorir tudo dentro do h1, menos o span.

Repare que o que está dentro do h1 é filho do h1, então usar h1:not() significa que "todos os h1 que não ( regra css)", Ex: se vc fizer isso h1:not(.tit) {color: red} todos os h1 ficam vermelhos, menos o que tiver a classe .tit

Veja o exemplo:

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>

7
  • então o problema de fazer isso é que alem de repetir o código perceba que no span tem uma borada laranja do h2 bem sutiu mais da para ver por isso acredito que o :not() iria me ajudar 100% entende seráq que estou usando errado o atributo com o scss tem alguma forma de faze-lo funcionar ? Commented 11/05/2018 às 14:47
  • 1
    @Kirito vou fazer um teste e te falo
    – hugocsl
    Commented 11/05/2018 às 14:48
  • beleza agradeço muito :) Commented 11/05/2018 às 14:56
  • @Kirito fiz uns testes aqui eu até consigo desconsiderar o color no span, mas quando vc usa o background não tem como não faze-lo passar por traz do filho também, a não ser que o filho tenho a seu próprio background. É tipo quando vc coloca opacity na div e tudo que está dentro dela também fica com opacidade... No momento além de repetir as classes, inclusive colocando um background-image: linear-gradient(gray, gray); no span para tirar o contorno laranja não consigo outra solução
    – hugocsl
    Commented 11/05/2018 às 15:46
  • entendi amigo muito obrigado se puder atualizar a resposta com o teste que vc fez removendo a borada laranja agradeço Commented 11/05/2018 às 17:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .