I've been working on changing the styling of every second row of content displayed on the page using ng-repeat. I managed to make it work for font color, however, I'm struggling with changing the background color.
Below is my code. I would appreciate any suggestions on what I might be doing wrong.
<div class="row" style="margin: 25px 0;">
<div ng-repeat="katt in minaKatter" class="cat-row-ads test" ng-if="!katt.isDeceased && katt.canBeBreedingMale">
<div class="tableContainer test col-xs-12">
<div class="col-xs-12 col-md-6">
<img src="data:image/jpeg,{{katt.imageId}}" alt="" class="row-image" style="margin-right: 10px; max-width: 40px;">
<span style="font-weight: bold; font-size: 12px; line-height: 30px;" ng-bind="katt.name"></span>
</div>
<div class="col-xs-12 col-md-3" style="line-height: 30px;">
<div ng-if="katt.avelshane && katt.status == 1">
<span class="label-style label label-default">ANNONSERA</span>
</div>
<div ng-if="katt.annonsTyp == '1'">
<span class="label-style label label-default">TILLHÖR</span>
</div>
<div ng-if="katt.annonsTyp == '3' && katt.status == 1">
<span class="label-style label label-default">ANNONSERA</span>
</div>
</div>
<div class="col-xs-12 col-md-3">
<a href="create-male-ad.php?catId={{katt.id}}" ng-if="(katt|| katt) && (katt== 2 || !katt)" class="btn btn-back btn-sm"><i class="fa fa-pencil" aria-hidden="true"></i> Skapa / Redigera annons</a>
</div>
</div>
</div></div>
CSS:
.tableContainer {
padding: 5px 8px;
}
.test:nth-child(odd){
color: red;
background-color: black;
border-bottom: 1px solid orange;
}