I am seeking clarification on the implementation of :nth-child() in CSS.
Consider the following HTML structure:
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>
And corresponding CSS code:
div.parent div.child:nth-child(3n) {
background-color: yellow;
}
div.parent div.child:nth-child(2n) {
background-color: white;
}
The CSS rule defined later appears to override the earlier one. Is this behavior consistent across all environments?
Here is a JSFiddle demonstrating this scenario with the CSS rules interchanged.