Not getting correct output by :not() pseudo class

Answer 1

Add border to notice that :not(div) is also selecting body and html element. your second element is not being selected but is inherting the color from body.

You can clearly notice there is no border around the second div:

div:not(.awesome) {
  color: red;
}

 :not(div) {
  color: blue;
  border:1px solid
}

Selected for 1st
Not selected
This is selected for 2nd
This is selected for 2nd

Define a color to body to have another result:

div:not(.awesome) {
  color: red;
}

 :not(div) {
  color: blue;
  border: 1px solid
}

body {
  color: green
}

Selected for 1st
Not selected
This is selected for 2nd
This is selected for 2nd

Better consider a wrapper when applying a selector to make sure the scope of your selection is well defined and you don't select unwanted elements. You may use the body element but it's not recommended because even the body can give you some surprise.

.container div:not(.awesome) {
  color: red;
}

.container :not(div) {
  color: blue;
  border: 1px solid
}

  
Selected for 1st
  
Not selected
  
This is selected for 2nd
  
This is selected for 2nd