title: is there a way to reference a child node and get say an inherited background color?
body: <p>I was doing some initial testing in jsFiddle as follows: <a href="https://jsfiddle.net/6pqxfy2o/" rel="nofollow noreferrer">https://jsfiddle.net/6pqxfy2o/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
   console.log("fired");
    $("div").each(function(){
     console.log($(this).attr("class"));
      console.log($(this).css("background-color"))})
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.color{
    background-color:teal;
  }
  
  .dim{
    width: 200px;
    height: 200px;
  }
  
  .sub-dim{
    width: 50px;
    height:50px;
    border: solid 1px white;
  }
  .ping {
    background-color: cyan;
  }
  
  .ack {
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="dim color"&gt;
    &lt;div class="sub-dim ack"&gt;
    
    &lt;/div&gt;
    &lt;div class="sub-dim ping"&gt;
    
    &lt;/div&gt;
    &lt;div class="sub-dim"&gt;
    
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This was showing that when running, it did not actually pass the inherited color into the child.</p>
  
  <p>I am curious though how I can get the <code>background color</code> of the <code>sub-dim</code> which has no background color, such as:  current <code>background-color</code> or nearest.</p>
  
  <p>My end goal would be to say:  When iterating over <code>sub-dim</code> to return [red, cyan,teal] or color codes.  Based on the item I gave you, the div is transparent and the parent's color is showing through.</p>