In order to style the products displayed on a product list page, I have an unknown amount of divs, with each row containing 4 divs for individual products. My goal is to apply a specific CSS class to the first div in each row, then another class to the second div, and so on. While I believe this can be accomplished using CSS and potentially jQuery, I am unsure where to begin my search.
The expected outcome should resemble the following:
<div> //row1
<div id="1" class="grid1"> Product 1 </div>
<div id="2" class="grid2"> Product 2 </div>
<div id="3" class="grid3"> Product 3 </div>
<div id="4" class="grid4"> Product 4 </div>
</div>
<div> //row 2
<div id="5" class="grid1"> Product 5 </div>
<div id="6" class="grid2"> Product 6 </div>
<div id="7" class="grid3"> Product 7 </div>
<div id="8" class="grid4"> Product 8 </div>
</div>
...
Any guidance towards a solution would be greatly appreciated.