CSS *:not(div p) does not select anything - html

Question

I have the following a HTML code:
<div>
<p> linux version</p>
<h1> new tool </h1>
And some CSS for it that should select <h1> but does not select anything.
*:not(div p) {
font-family: sans-serif;
}
The following does not work too:
*:not(div>p) {}
I have so many such <div> <p> in the HTML whereas the following selects and apply the font:
div p {
font-family: sans-serif;
}

Answer 1

As others have stated in the comments: the usage of the not selector is like this:
E:not(s) - an E element that does not match simple selector s
where
A simple selector is either a type selector, universal selector,
attribute selector, class selector, ID selector, or pseudo-class.
So if you want you code to work you'll have to add a class to the <p> elements which you don't want styled with that font-family.
*:not(.classname) {
font-family: sans-serif;
}
Alternatively: If you need to apply a font to all your elements - it is generally done by setting it in the body element, then the other elements in the document inherit that rule.
Then you can style your <p> elements within the div differently.
body
{
font-family: sans-serif;
}
div p
{
/* the special font-family that you need for paragraphs within a div */
}

Answer 2

<div>
<p> linux version</p>
<h1> new tool </h1>`
</div>
Now consider the following CSS code-
*:not(div p) {
font-family: sans-serif;
}
This code selects all elements except the <p> inside <div>. So a <div> is also selected by the selector *:not(div p) and hence all the contents of the <div> gets the style: font-family: sans-serif. So the text in the <p> element in the <div> also gets the style.
N.B. You should keep track so that two CSS declaration don't contradict each other. Then if such contradiction arises the declaration that applies some style wins over the declaration that forbids that style to be applied on that element.
Hence the following code will run fine
div>:not(p)
{
font-family: sans-serif;
}
This selector will select the elements inside a <div> except <p>-elements. So you may use this instead.

Answer 3

Well, it won't be exactly the same thing, but in this case you can use
div>*:not(p)
instead of
*:not(div>p)
Demo

Answer 4

It seems in your question, that given the markup:
<div>
<p>linux version</p>
<h1> new tool </h1>
</div>
<h1> elements are the special ones. So be specific. Rather than define styles for "all-but-me" (as you do with "*:not(div p)" clause) set and standard for "all-of-them" and then you overwrite the one you consider special. Just like here:
div {
font-family: serif;
}
div > h1 {
font-family: sans-serif;
}