Selector 'not' does not work

Question

Selector 'not' does not work

Navigation

#1 by (1 votes)

1

I have a gray box with a low opacity and inside it a word, while applying the selector 'not' on the main 'div' to cancel the opacity of the word that is in a 'p' tag surrounded by this 'div' the 'not' selector does not do its job and the word continues with the low opacity, I want to make the word not get the opacity settings of the main div, without removing the 'p' tag from it, / p>

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>

html css css3

asked by anonymous 07.07.2018 / 05:39

1 answer

Counting sequence of numbers recursively in a matrix C Only one chart is displayed per page

score 1 · Accepted Answer

What happens is that when you put opacity in div everything inside it also inherits this opacity and there is no way to remove it, even as the :not() selector or using !important .

Use of techniques to avoid this is creating a pseudo-elemento in this div that will have the elements inside, and put the opacity only in the pseudo element

See in the example below how your code gets with a ::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>