:not(selector) isn't working properly

Question

Why is the code below is not working? It should hide all the elements that are not p but the display property isn't working properly.

 p { color: #000000; } :not(p) { display: none; color: #ff0000; } 

  <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some text in a div element.</div> <a href="http://www.w3schools.com" target="_blank">Link to W3Schools!</a> 

Answer 1

Given your example and your request

It should hide all the elements that are not p

You have to use body :not(p) - which means you are using the * in the not() like this body *:not(p) - so declaring that it will apply styles to all the children of the body except the p

 body *:not(p) { display: none; color: #f00; } p { color: #000; } 

 <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some text in a div element.</div> <a href="http://www.w3schools.com" target="_blank">Link to W3Schools!</a> 

Answer 2

div *:not(p) em {…}

This selects all em elements that are in an element (that is not ap element) and that are in a div element. so … is a match, but

…

is not.

Probably you should include the division. My reference