CSS / SCSS — доступ к дочернему элементу дочернего элемента с неизвестным дочерним типом
Если у меня есть такой 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вне этого элемента.
Ответы 2
Указание корневого элемента и просто оставление пробела означает потомок, поэтому
.some-class i {
color: grey;
}
должен делать то, что вы хотите.
Если вы хотите стилизовать их только в том случае, если они находятся хотя бы на один уровень глубже, чем корень, используйте *, что означает любой тег.
.some-class * i {
color: grey;
}
Наконец, если вы хотите нацелить их конкретно на третий уровень, используйте
.some-class > * > i {
color: grey;
}
Ты пробовал:
.some-class i {
//Your styles here
}
> * > i- лучшее решение для меня, доступ ко всем i-тегам был моим "планом Б