Is there a way to select nth-child globally? - html

Question

This question already has answers here:
Select nth-child across multiple parents
(2 answers)
Closed 3 hours ago.
I have an HTML structure looks like this, I want to select all odd <span>s globally ignoring their parent elements.
Is there a way to make 1, 3, 5, 7, 9 red? I tried :nth-child(odd) but I think it only counts locally.
body {
counter-reset: spans;
}
span {
counter-increment: spans;
}
span::after {
content: counter(spans);
}
span:nth-child(odd) {
color: red;
}
<div>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

Answer 1

No, that's not how :nth-child() and :nth-of-type() selectors work:
:nth-child(expr) only selects elements with an ordinal position within their containing parent element that satisfies expr, and not their ordinal position in the entire document, or any other arbitrary ancestor: only their ordinal position within immediate parent element matters.
:nth-of-type only selects elements with an ordinal position within their siblings that satisfies expr, which also implies the selector is evaluated independently of "cousin" elements in the DOM tree.
...so what you're asking is not currently possible using only CSS selectors: there is no :nth-overall or :nth-of-type-overall pseudoclass selector.
You can still implement this using a client-script to add a named classes to those elements manually when the document loads.
i.e. something like this:
const allSpans = document.getElementsByTagName("span");
for( let i = 1; i < allSpans.length; i += 2 ) {
allSpans[i].classList.add( 'isGloballyOdd' );
}
body {
counter-reset: spans;
}
span {
counter-increment: spans;
}
span::after {
content: counter(spans);
}
span.isGloballyOdd {
color: red;
}
<div>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
...which looks like this: