title: How to make properties apply to all descendants, not only direct children?
body: <p>What is required in CSS for properties to be passed on to all children, not just direct children?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.post&gt;img {
    height: 50%;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="post"&gt;
    &lt;img src="http://cdn1.theodysseyonline.com/files/2015/06/21/635704919336245232-967016789_Hair.jpg" /&gt;
    &lt;!--This works, appropriately sizing the image. However, if I nest the image, the properties
      seem to disappear:--&gt;
    &lt;a href="http://theodysseyonline.com/ui/4-reasons-why-should-totally-have-crush-bernie-sanders/111812"&gt;
      &lt;img src="http://cdn1.theodysseyonline.com/files/2015/06/21/635704919336245232-967016789_Hair.jpg" /&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;!--The sizing on the image disappears :( How can I make all img descendants of 
      .post inherit .post&gt;img's properties?--&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The second image, which is nested in an <code>a</code> tag, does not inherit <code>.post&gt;img</code>'s properties. </p>
  
  <p>I assume this is because it is not a direct child. How do I force all <code>img</code> descendants of <code>.post</code> to inherit <code>.post&gt;img</code> propeties?</p>
  
  <p><a href="https://jsfiddle.net/numemv08/" rel="nofollow">JsFiddle</a></p>