Первый ребенок - SCSS ⇐ CSS

[Anonymous]

У меня есть этот HTML

Код: Выделить всё

@for (action of sortingActions) {
@if (!action.hasChildren) {

} @else {

}
}

и этот CSS

Код: Выделить всё

  .options-panel {
display: flex;
flex-direction: column;
align-items: flex-start;

width: 200px;
padding: 8px 0;
border-radius: 4px;

}

Я пытаюсь задать цвет фона только для первого дочернего элемента с классом options-divider.
Если я поставлю только цвет фона для класса, а не для первого дочернего элемента, класс получает цвет фона.
Я пробовал эти варианты

Код: Выделить всё

.options-divider:nth-of-type(1) {
background-color: #FF5733;
}

options-divider:first-of-type {
background-color: #FF5733;
}

app-options-item:has(.options-divider):first-of-type {
background-color: palegoldenrod;
}

почему не работает?

Подробнее здесь: https://stackoverflow.com/questions/785 ... child-scss