css last-child not applying with custom css class

i am trying to apply last-child css and it has no effect. here is the code:

<ng-container *ngFor="let exp of getExpensesInCategory(expType)">
<ion-row class="tree-table-row">
<ion-col>
<ion-label class="ban-title3">{{exp}}</ion-label>
</ion-col>
</ion-row>
</ng-container>


The CSS I wrote is below which changes background color and border settings for the last row

.tree-table-row {
background-color: #FFFFFF;
//border-radius: 10px;
padding: 5px;
padding-right: 15px;
margin: 5px;
margin-top: 0 !important;
margin-bottom: 0 !important;
border-bottom: 1px solid #AEB1B5;
border-top: none;
border-left: 1px solid #AEB1B5;
border-right: 1px solid #AEB1B5;
}

.tree-table-row:last-child {
background-color: pink;
//border-radius: 10px;
padding: 5px;
padding-right: 15px;
margin: 5px;
margin-top: 0 !important;
margin-bottom: 0 !important;
border-bottom: 1px solid #AEB1B5;
border-top: none;
border-left: 1px solid #AEB1B5;
border-right: 1px solid #AEB1B5;
border-radius: 10px;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}

Continue reading...