1

Tenho uma caixa cinza e com uma opacidade baixa e dentro dela uma palavra, ao aplicar o seletor 'not' na 'div' principal para cancelar a opacidade da palavra que está em uma tag "p" cercado por essa 'div' o seletor 'not' não faz sua função e a palavra continua com a opacidade baixa, pretendo fazer com que a palavra não pegue as configurações de opacidade da 'div' principal, sem retirar a tag "p" de dentro dela, ??

body{background-color:#6C9;}
.bl:not(p){ position: relative; 
z-index:-1; 
width:300px; 
opacity:0.5; 
height:200px; 
background-color:#CCC;
border:1px solid #000;
}
p{font-size:25px; 
font-weight:bold; 
opacity:1;
}
<div class="bl">
   <p>BLOCO</p>
</div>

1 Resposta 1

1

Cara o que acontece é que quando vc coloca opacidade na div tudo que está dentro dela também herda essa opacidade e não há como tirar, mesmo como o seletor :not() ou usando !important.

Usa das técnicas para evitar isso é criando um pseudo-elemento nessa div que vai ter os elementos dentro, e colocar a opacidade apenas no pseudo-elemento

Veja no exemplo abaixo como fica o seu código com um ::after

body{
    background-color:#6C9;
}
.bl { 
    position: relative; 
    width:300px; 
    height:200px; 
    border:1px solid #000;
}
.bl::after { 
    content: "";
    position: absolute; 
    top: 0;
    left: 0;
    z-index:-1; 
    width:100%; 
    opacity:0.5; 
    height:100%; 
    background-color:#CCC;
}
p {
    font-size:25px; 
    font-weight:bold; 
}
    
<div class="bl">
   <p>BLOCO</p>
</div>

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 .