title: CSS filter application order
body: <p>It appears that CSS filters do not following the same rules as other CSS properties, including overriding and order of application.  </p>
  
  <p>Firstly, they can only be overlapped, not overridden (replaced), by filters in descendant elements.  Secondly, changing CSS rule specificity does not seem to change the order of application of these filters.  This is the problem I'm dealing with now.  </p>
  
  <p>As seen in this <a href="http://jsbin.com/qozehi/7/edit?html,css,output" rel="nofollow">JS Bin</a>, the brightness filter is being applied before the invert filter, resulting in the opposite effect of what I need.  I need the invert filter to be applied first to an ancestor, and the brightness filter to be applied afterwards to a specific descendant.  </p>
  
  <p>The only solution I've come up with involves using :not() to exclude the descendant from the ancestor filter, enabling me to apply a separate (non-overlapping) filter to the descendant.  This, however, resulted in very poor performance in our single page application (single, large DOM).  </p>
  
  <p>Any ideas on how to apply the invert filter first in this situation, or another solution?</p>
  
  <p>*Please note that I need filters to do the work, rather than manually applying specific colors to the descendant element, because I'm actually filtering a colorful image.  I used text in the JS Bin for simplicity.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
    &lt;style&gt;
      body {
        -webkit-filter: invert(100%);
      }
      .normal {
        background: white;
      }
      .brighter {
        background: white;
        -webkit-filter: brightness(200%);
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="normal"&gt;normal night mode text&lt;/div&gt;
    &lt;div class="brighter"&gt;brighter night mode text&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>