Color odd and even div alternatively with different color

I had a situation where I need to have an alternate background color for the rows inside a parent div. Sample code is shown below

<div class="content-body-notification content-body  ">
<div class="user-row">
1
</div>
<div class="user-row">
2
</div>
<div class="user-row">
3
</div>
<div class="user-row">
4
</div>
</div>

So now we are going to give different background color to odd and even user-row rows as shown below


.content-body .user-row:nth-child(odd) {
    background: #eeeff2;
}
.content-body .user-row:nth-child(even) {
    background: #f8f8fa;
}

and we get output same as diagram shown below:

Leave a comment