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

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

How to write a CSS Rule that selects all .box divs that are NOT inside the container class?

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

This is not working because there is a div without .container inside the container div.

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

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