I'm trying to change the background color of each .achievement
div. The content is being generated dynamically so I can't add a class easily to each one.
I have it working with selectors like .achievements .grid-row:nth-child(odd) .col-1-2:nth-child(even) .achievement
but they seem a little bloated. The problem I'm having is that the .achievement
div is nested a few deep so I can't just use an :nth-child
or :nth-of-type
on it.
I'm just checking to see if there is a better way to select those that I'm missing out on.
HTML
<div class="achievements">
<div class="grid-row">
<div class="col-1-2">
<div class="achievement">
<p>Testing...</p>
</div>
</div>
<div class="col-1-2">
<div class="achievement">
<p>Testing...</p>
</div>
</div>
</div>
<div class="grid-row">
<div class="col-1-2">
<div class="achievement">
<p>Testing...</p>
</div>
</div>
<div class="col-1-2">
<div class="achievement">
<p>Testing...</p>
</div>
</div>
</div>
</div>
CSS
.achievements .grid-row:nth-child(odd) .col-1-2:nth-child(even) .achievement {
background: #5891bc;
}
.achievements .grid-row:nth-child(even) .col-1-2:nth-child(odd) .achievement {
background: #96c3e6;
color: #585858;
}
.achievements .grid-row:nth-child(even) .col-1-2:nth-child(even) .achievement {
background: #d3dfe7;
color: #585858;
}