css body filter invert not working for pseudo selector [duplicate]

Question

I am trying to invert the colors using css filter property. I have applied filter:invert(100%) in body. I want filter property should not affect <img /> element. I have added css :not(img) in body. But, it won't work.

.aaa {
  width: 100px;
  height: 100px;
  background: #00a3fe;
  margin: 5px
}
body:not(img) {
  filter: invert(90%)
}

<div class="aaa">

</div><div class="aaa">

</div>

<img src="http://pngimg.com/uploads/birds/birds_PNG115.png" />

Answer 1

You are missing space on the descendant selector so body:not(img) is equivalent to body and it's applying for the body tag itself.

.aaa {
  width: 100px;
  height: 100px;
  background: #00a3fe;
  margin: 5px
}
body :not(img) {
/*--^^^----*/
  filter: invert(90%)
}

<div class="aaa">

</div><div class="aaa">

</div>

<img src="http://pngimg.com/uploads/birds/birds_PNG115.png" />

---

UPDATE : Even in previous case it will cause issues when there are children elements so it's better to apply it for the body and apply the image as well so it will revert back.

.aaa {
  width: 100px;
  height: 100px;
  background: #00a3fe;
  margin: 5px
}

body {
  filter: invert(90%)
}

body img {
  filter: invert(90%)
}

<div class="aaa">

</div>
<div class="aaa">

</div>
<div>
  <img src="http://pngimg.com/uploads/birds/birds_PNG115.png" />
</div>

Or you have to apply filter specifically to element instead of wildcard selecting.