CSS selector is not updating after click on element

user_10449848 0
Viewed 44

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.

css html jquery javascript
1 Answers

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.

user_193446710
Related