CSS Rule exclude parent class

Question

How can I write a CSS Rule that selects all div.box that are not inside .container?

The following snippet is not working because there is a div without .container inside the div.container.

div:not(.container) .box {
   background:red;
}

<div class="box">box</div> <!-- select this -->
<div class="container">
    <div>txt</div>
    <div><div class="box">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->

Answer 1

If you do not want to override every attribute, the only way I see is to give an additional class to the boxes inside of the specific container.

.box:not(.exclude) {
  background: red;
}

<div class="box">box</div> <!-- select this -->
<div class="container">
    <div>txt</div>
    <div><div class="box exclude">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->