Angular Material mat-list-item alternate row color using custom css is not working

Question

I am writing an Angular app and using mat-list-item to add rows to my data grid. The grid has a parent row will will expand and show child rows when it is click. By default, all the parent rows are collapsed. I got all the child rows working with alternate color but not the parent row. They are all the same color which I need to alternate from white and gray. I tried a few approaches but it is not working in the style.css. I can change all the parent row colors but not make them alternate like the child rows.

My html/angular code is the following

<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>

The child rows works with the following in the angular component css file

.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);
  }

But I am stumped by the parent row where I defined in the global 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);
  }

It only change color the the 2n+1

I even tried the following

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

Again, changed all the parent rows for odd.

How can I get the parent row color to alternate? Any help is appreciated. Thanks

BTW, I already read the other articles. I have used 2n and 2n+1, odd and even but they are not working with the mat-list-item. The odd is changing the color but not the even. The other articles are using div tag. I am googling but have not found something that will work. Not sure why the even is not working.