title: CSS selector for something not inside something else
body: <p>I have some nested elements like this:</p>
  
  <pre><code>&lt;div class="foo"&gt;
      &lt;div class="select-inside-this"&gt;
          &lt;div class="not-inside-this"&gt;
              &lt;div class="one select-this"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="select-inside-this"&gt;
      &lt;div class="two select-this"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="three select-this"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I want to select all <code>.select-this</code> which are inside <code>.select-inside-this</code> but not those which are wrapped in <code>.not-inside-this</code>. So in the end, i should be able to select only <code>two.select-this</code> from the above code.
  The CSS I've tried but did not work:</p>
  
  <pre><code>.select-inside-this :not(.not-inside-this) .select-this {
      /* style here /*
  }
  </code></pre>
  
  <p>or:</p>
  
  <pre><code>.select-inside-this *:not(.not-inside-this) .select-this {
      /* style here /*
  }
  </code></pre>
  
  <p>Any workaround here?</p>
  
  <p>I don't want to use JavaScript here. I need pure CSS3 solution.</p>
  
  <p>EDIT: I don't want to use direct child (<code>&gt;</code>) selector. As I've asked, I want to select all those element from any level just without the exception wrapper.</p>