I'm trying to understand, why negating :fullscreen, i.e. :not(:fullscreen), does not work as expected.

See https://jsfiddle.net/rmjae4Lc/ for a demo (where it works for body, but not for p).

:fullscreen button {
  background-color: green;
}

:not(:fullscreen) body {
  background-color: gold;
}

:not(:fullscreen) p {
  background-color: orange;
}

div {
  background-color: blue;
}

:fullscreen div {
  background-color: white;
}

<button onclick="if (document.fullscreenElement) {(document.exitFullscreen || document.webkitExitFullscreen).call(document)}
   else {var elem = document.documentElement; (elem.requestFullscreen || elem.webkitRequestFullscreen).call(elem)}">toggle fullscreen</button>

<p>
  Negating fullscreen works for body but not for div. In fullscreen mode body turns white, but div stays orange.
</p>


<div>
  A work around.
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

(Running the snippet here, throws Fullscreen request denied. Thus use jsfiddle link above.)

CodePudding user response：

I've found a simple workaround (tested on Chrome, Edge, Firefox):

html:not(:fullscreen) p {
    background-color: orange;
}