While attempting to use CSS to assign a different background color to every second div element, I encountered an issue where both divs were affected when using (odd) and none when using (even). How can this be explained?
.hoverDiv:nth-child(odd) {
background: red;
}
.hoverDiv:hover {
background: #696969;
cursor: pointer;
}
<div class="modal-body">
<div>
<div class="hoverDiv">
<h2>Number 1</h2>
</div>
</div>
<div>
<div class="hoverDiv">
<h2>Number 2</h2>
</div>
</div>
</div>