CSS Rule exclude parent class

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 -->

You can apply a :not() selector to the child that includes a condition regarding the parent:

div.box:not(.container *) {
   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 -->

Taking from the Mozilla docs:

:not() is the negation pseudo-class that selects elements that match none of the specified selectors. So you use :not() to apply style to elements excluded by the specified selectors.

The key is, it takes any valid CSS selector, not just ones with attributes only referring to the final child element. In out case that's div.container *, which means "any element inside one with class container". So since that is in a :not(), it will exclude those.

In a way, the CSS rule you are asking for is sort of backwards. You should start with the most generic rules, and then add more specific ones. In your case, you should do something like the following:

/* Generic Box styles */
.box
{
  border: 1px solid black;
}

/* Boxes in a container */
.container .box
{
  color: blue;
}

<div class="box">Generic Box</div>
<div class="container">
  <div class="box">I'm in a container</div>
</div>

Select all div.box or all div not inside .container? What you ask for and what you say you want selected in the html code sample are not the same thing. That said, your css selectors are just out of order. Try:

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

and

<div class="box">box</div>
<div class="container">
    <div>txt</div>
    <div><div class="box">box</div></div>
</div>
<div class="box">box</div>

If you want all the divs, just remove the .box