Угловой материал mat-list-item альтернативного цвета строки с использованием пользовательских CSS не работает

Question

Я пишу приложение Angular и использую mat-list-item для добавления строк в свою сетку данных. Сетка с родительской строкой будет расширяться и показывать дочерние строки при нажатии. По умолчанию все родительские строки свернуты. Я получил все дочерние строки, работающие с альтернативным цветом, но не родительский ряд. Они все одного цвета, который мне нужно чередовать с белым и серым. Я попробовал несколько подходов, но он не работает в style.css. Я могу изменить все цвета родительской строки, но не сделать их чередующимися, как дочерние строки.

Мой HTML / угловой код следующий

<div class="ng-container" *ngFor="let displayName of myData.displayNames">
    <mat-list-item fxLayoutAlign="start" (click)="onRowClicked(displayName, myData)" class="metric-list-item"> // this does not alternate
            <strong><span>{{displayName.name}}</span></strong>  
        </mat-list-item>
        <div class="ng-container" *ngIf="showChildRows(displayName)">
            <mat-list class="wf-list">  //this works and alternate colors
                    <mat-list-item fxLayoutAlign="start" *ngFor="let myLabel of myData.subDisplayNames"> 
                            <span class="indent">{{myLabel}}</span>
                        </mat-list-item>
                </mat-list> 
        </div>
</div>

Дочерние строки работают со следующим в угловом компоненте css файла

.mat-list >  .mat-list-item:nth-child(2n+1){
    background-color:white;
  }
  .mat-list >  .mat-list-item:nth-child(2n){
    background-color:rgb(230, 228, 228);
  }

Но я озадачен родительской строкой, где я определил в глобальном style.css

  .metric-list-item:nth-child(2n){
    background-color: rgb(207, 203, 203);
}
.metric-list-item:nth-child(2n+1){
    background-color:rgb(230, 228, 228);
  }

Это только изменить цвет 2n+1

Я даже попробовал следующее

.metric-list-item:nth-child(even){
    background-color: rgb(207, 203, 203);
}
.metric-list-item:nth-child(odd){
    background-color:rgb(185, 55, 55);
} 

Опять же, поменял все родительские строки на нечетные.

Как получить чередующийся цвет родительской строки? Любая помощь приветствуется. Спасибо

Кстати, я уже читал другие статьи. Я использовал 2n и 2n+1, нечетные и четные, но они не работают с mat-list-item. Нечетное - это изменение цвета, но не четное. Другие статьи используют тег div. Я гуглю, но не нашел что-то, что будет работать. Не уверен, почему даже не работает.