title: angular4:ng-content nested class based selection
body: <p>As we all know in Angular4 we have support for <code>ng-content</code>.</p>
  
  <p>In this, we can select based upon <strong>class</strong>, <strong>element-name</strong>, <strong>attributes</strong>.</p>
  
  <p>I am trying to select element based upon class :
  Here is my consumer component html :</p>
  
  <pre><code> &lt;my-component&gt;
        &lt;div class = "item"&gt;
          &lt;div class = "item-small"&gt;small-item content&lt;/div&gt;
       &lt;div class = "item-large"&gt;large-item content&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/my-component&gt; 
  </code></pre>
  
  <p>Now in my <code>my-component</code> template, I am trying to access <code>div</code> with class <code>item-small</code>.</p>
  
  <p>My <code>my-component</code> template looks as follows:</p>
  
  <pre><code>&lt;div class="my-component"&gt;
     &lt;ng-content select = ".item&gt;.item-small"&gt;&lt;/ng-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it is not returning me anything.
  Here is the plunk for this issue:</p>
  
  <p><a href="https://plnkr.co/edit/2hlL2GezNXRoLCD1FAPD?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/2hlL2GezNXRoLCD1FAPD?p=preview</a></p>
  
  <p>What is the best option to handle such cases?</p>
  
  <p>Kindly give right approach to solve this problem.</p>