Reviewing my HTML snippet:
<div class="itemContainer">
<div class="clearance"></div>
<div class="productBox" ></div>
<div class="clearance"></div>
<div class="productBox" ></div>
</div>
CSS Styles:
.itemContainer .productBox {
background-color: #DFDDDD;
border-bottom: 1px solid #B7B7B7;
padding-right: 5px;
}
.itemContainer .productBox:nth-of-type(2)
{
background-color: white;
border-bottom: 1px solid #B7B7B7;
padding-right: 5px;
}
The issue is that the selector is targeting the first child of productWarp, not the second productBox element. This results in it behaving like an nth-child selector.
<div class="itemContainer">
<div class="clearance"></div>
<div class="productBox" ></div>//This one gets selected
<div class="clearance"></div>
<div class="productBox" ></div>//This one should have been selected
</div>
Any insights on what could be going wrong here?