Here is my markup:
<p>This is <span class="rounded">some</span> text which <span class="rounded">shows</span> what I <span class="rounded">want</span> to do.</p>
I have the following CSS:
span.rounded:not(.clicked):nth-child(1) {
background: red;
}
So, this turns the background of first rounded element to red.
Now, if i click on the word some, it applies a class clicked to the wrapping span tag. The HTML now looks like this:
<p>This is <span class="rounded clicked">some</span> text which <span class="rounded">shows</span> what I <span class="rounded">want</span> to do.</p>
At this point, I expect to word shows to have a red background because it seems to satisfy the selector:
span.rounded:not(.clicked):nth-child(1) {
background: red;
}
However, no other tag ever becomes red. What am I doing wrong?
How can I make the next tag red after the current one has been clicked?
Thanks.
To summarise the comments, and someone please correct me if I'm wrong on this first point, but this:
span.rounded:not(.clicked):nth-child(1) {
background: red;
}
Doesn't work because it will always find the 1st child of the <p> parent that is a span with class rounded, and if it is not clicked, it will apply the rule.
This solution does work:
span.clicked + .rounded:not(.clicked)
This will look for a span that is clicked, find the next span with class rounded, and apply the rule only if it's not clicked.