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