My goal is to alternate colors for elements with a certain class, ignoring any elements of different classes in between them. Despite my attempts to use nth-of-type, I have encountered issues with its functionality in Firefox and Chrome.
<div class="parent">
<div class="section">Section</div>
<div class="section">Section</div>
<div class="ignoreMe">IgnoreMe</div>
<div class="section">Section</div>
<div class="section">Section</div>
</div>
.parent .section
{
background-color: yellow;
}
.parent .section:nth-of-type(2n+1)
{
background-color: red;
}
Ideally, the sections should display as red, yellow, red, yellow, but the presence of the ignoreMe element disrupts this order and results in consecutive yellow backgrounds.
The CSS definition suggests that it should work according to my expectations: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
This selector is intended to be more versatile and practical when you want to select the same type of tag regardless of its position within the parent element or the presence of other different tags.
Can anyone advise me on how to resolve this issue?