title: Disable Blur filter on child containers
body: <p>So im working on a home page/cover page for a website and i have a parent container and a child container.</p>
  
  <p>The parent container has a background image with a <code>blur(10px)</code> filter but the filter is also applying to the child container, which is what i dont want.</p>
  
  <p>I have tried some solutions from other similar questions but none have helped or i might not be doing it right.</p>
  
  <p>I tried setting the child container with <code>z-index: 9999</code> and the parent to <code>z-index: 0</code>. I just also found another solution that could work since we had the same setup but its confusing.</p>
  
  <p>The solution was to add this line of code <code>background &gt; :not(header) { webkit-filter: blur(10px); }</code>. <code>background</code> is the parent and <code>header</code> is the child. (nav will also not be blurred but i want to get one element working first).</p>
  
  <p>I even tried to change the positions of the containers from <code>absolute</code> to <code>relative</code> and vise versa on each.</p>
  
  <p>This is my html file (css and html are in same file).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  @font-face {
      font-family: "Candy";
      src: url('font/Candy.otf') format("opentype");
  }
  @font-face {
      font-family: "DancingScript";
      src: url('font/DancingScript.ttf') format("truetype");
  }
  body {
      margin: 0;
      padding: 0;
  }
  background {
      position: absolute;
      background: url("images/cover_page.jpg") no-repeat;
      -webkit-filter: blur(10px);
      display: block;
      height: 100%;
      width: 100%;
      z-index: 0;
  }
  background &gt; :not(header) {
      -webkit-filter: blur(10px);
  }
  header {
      font-face: "Candy";
      font-size: 150px;
      text-align: center;
      color: #FFF;
  }
  nav {
      color: #FFF;
      font-face: "DancingScript";
      font-size: 25px;
  }
  nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  nav li {
      display: inline-block;
  }
  header, nav {
      display: block;
      position: relative;
      z-index: 9999;
  }
  &lt;/style&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;background&gt;
      &lt;header&gt;Rustic Rentals&lt;/header&gt;
      &lt;nav&gt;
         &lt;ul&gt;
              &lt;li&gt;Rentals&lt;/li&gt;
              &lt;li&gt;Sales&lt;/li&gt;
              &lt;li&gt;Contact&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/background&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The result can be seen <a href="http://rusticrentals.oldtreasuresfurniture.com/new_index.html" rel="nofollow">here</a>.</p>