title: CSS / SCSS - Access child of child element with unknown child type
body: <p>If I have some html like this, with only a class applied to the root. I want to access all <code>&lt;i&gt;</code> tags which are located deeper in the html.</p>
  
  <p>some example html:</p>
  
  <pre><code>&lt;div class="some-class"&gt;
    &lt;div&gt; &lt;!-- unknown type - could be span, div or something else --&gt;
      &lt;i&gt;&lt;/i&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If the <code>i</code> tag was a direct child I could apply styling in scss like this:</p>
  
  <pre><code>&gt; i {
    color: grey
  }
  </code></pre>
  
  <p>If I knew that the first child was always a div element i could apply styling like this: </p>
  
  <pre><code>&gt; div &gt; i {
    color: grey
  }
  </code></pre>
  
  <p>However I don't know the type of the first child - it could be anything. </p>
  
  <p>How do I correctly apply styling to the i tag in this case ? </p>
  
  <ul>
  <li>If it isn't possible with an dynamic solution - How can I then apply the styling to all the <code>i</code> tags within the root element, without styling <code>i</code> tags outside this element.</li>
  </ul>