2

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.

Improve this question
2
  • I see nothing with a class of mat-list - would be good if you could show the rendered html too. But my guess is you are using nth child wrong - you have a matlist and a div for each loop that's 2 children right there - nth child is an element selector - it is based on the siblings position - if you use a class, it will only match any element with that class in that position - it doesn't mean the nth of that class Commented Mar 12, 2019 at 15:13
  • The edit doesn't add enough to re-open the question. Readers are better served by reading the duplicates. - From review Commented Mar 12, 2019 at 19:06
Related questions
583
Alternate table row color using CSS?
75
Alternate row colours angular material table
767
CSS text-overflow: ellipsis; not working?
Load 5 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.