title: CSS negation pseudo-class :not() for parent/ancestor elements
body: <p>This is driving me nuts:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div&gt;&lt;h1&gt;Hello World!&lt;/h1&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>*:not(div) h1 { color: #900; }
  </code></pre>
  
  <p>Doesn't this read, "Select all <code>h1</code> elements that have an ancestor that is not a <code>div</code> element...?" Thus, "Hello World!" should not be coloured red, yet it still is.</p>
  
  <p>For the above markup, adding the child combinator works:</p>
  
  <pre class="lang-css prettyprint-override"><code>*:not(div) &gt; h1 { color: #900; }
  </code></pre>
  
  <p>But doesn't affect the <code>h1</code> element if it is not a child of a <code>div</code> element. For example:</p>
  
  <pre><code>&lt;div&gt;&lt;article&gt;&lt;h1&gt;Hello World!&lt;/h1&gt;&lt;/article&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Which is why I'd like to indicate the <code>h1</code> element as a descendant, not a child, of the <code>div</code> element. Anyone?</p>