CSS / SCSS - Access child of child element with unknown child type

Question

If I have some html like this, with only a class applied to the root. I want to access all <i> tags which are located deeper in the html.

some example html:

<div class="some-class">
  <div> <!-- unknown type - could be span, div or something else -->
    <i></i>
  </div>
</div>

If the i tag was a direct child I could apply styling in scss like this:

> i {
  color: grey
}

If I knew that the first child was always a div element i could apply styling like this:

> div > i {
  color: grey
}

However I don't know the type of the first child - it could be anything.

How do I correctly apply styling to the i tag in this case ?

• If it isn't possible with an dynamic solution - How can I then apply the styling to all the i tags within the root element, without styling i tags outside this element.

Answer 1

Specifying the root element and just leaving a space means descendant, so

.some-class i {
    color: grey;
 }

should do what you want.

---

If you want to only style them if they are at least one level deeper than the root then use * which means any tag.

 .some-class * i {
    color: grey;
 }

---

Finally, if you want to target them at specifically the third level use

  .some-class > * > i {
    color: grey;
 }