title: how to give element the background of another element which is 2 levels higher in the html hierarchy??
body: <p>i have 3 levels hierarchy in html code:</p>
  
  <pre><code>&lt;section&gt;
       &lt;article&gt;
            &lt;div&gt;
  
            &lt;/div&gt;
       &lt;/article&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>and each levels has its own background :</p>
  
  <pre><code>section{
      background: #ffffff;
  }
  
  article{
      background: red;
  }
  
  div{
      background: /*????*/;
  }
  </code></pre>
  
  <p>how can i get the div show the background of the section??
  *for the example purposes lets say they each have pre-defined width and height and they all located one on top of the other in a way the div sits on the article which sits on the section</p>