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
}

<div>Selected for 1st</div>
<div class="awesome">Not selected</div>
<section>This is selected for 2nd</section>
<section>This is selected for 2nd</section>

Define a color to body to have another result:

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

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

body {
  color: green
}

<div>Selected for 1st</div>
<div class="awesome">Not selected</div>
<section>This is selected for 2nd</section>
<section>This is selected for 2nd</section>

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
}

<div class="container">
  <div>Selected for 1st</div>
  <div class="awesome">Not selected</div>
  <section>This is selected for 2nd</section>
  <section>This is selected for 2nd</section>
</div>