CSS / SCSS - Доступ к дочернему элементу дочернего элемента с неизвестным дочерним типом

Question

Если у меня есть какой-то html-код, такой как только класс, примененный к корню. Я хочу получить доступ ко всем тегам <i>, которые расположены глубже в HTML.

пример html:

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

Если бы тег i был прямым потомком, я мог бы применить стили в scss следующим образом:

> i {
  color: grey
}

Если бы я знал, что первый ребенок всегда был элементом div, я мог бы применить стиль так:

> div > i {
  color: grey
}

Однако я не знаю тип первого ребенка - это может быть что угодно.

Как правильно применить стилизацию к тегу i в этом случае?

• Если с динамическим решением это невозможно - как я могу применить стилизацию ко всем тегам i в корневом элементе, не используя стили i вне этого элемента.

Answer 1

Вы пробовали:

.some-class i {
//Your styles here
}

Answer 2

Указание корневого элемента и просто оставление пробела означает потомок, поэтому

.some-class i {
    color: grey;
 }

должен делать то, что вы хотите.

---

Если вы хотите стилизовать их, только если онихотя бы на один уровень глубже, чем корень, затем используйте *, что означает любой тег.

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

---

Наконец, если вы хотите нацелиться на них конкретно на третий уровень, используйте

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