title: CSS selector to exclude contents of a DIV element?
body: <p>In the following HTML snippet:</p>
  
  <pre><code>&lt;div class="content"&gt;
    &lt;p&gt;Lorem ipsum&lt;/p&gt;
    &lt;img src="path/to/image.jpg" /&gt;
    &lt;div class="product"&gt;
      &lt;p&gt;Dolor sit amet&lt;/p&gt;
      &lt;img src="path/to/another/image.jpg" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need a CSS selector to select and style the first image (the one in the .content div element) but NOT the second one (the one in the .product div element).</p>
  
  <p>I have gone a few rounds with the :not() negation pseudo class, but something like</p>
  
  <pre><code>.content *:not(.product) img
  </code></pre>
  
  <p>doesn't seem to be working (probably because I've bastardized the syntax).</p>
  
  <p>How can I select all images anywhere in my .content div, but excluse all images anywhere in my .product divs? Note that multiple divs may be nested at various levels, so I can't refer to a specific child of a .content div.</p>