Aquí está mi marcado:
<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>Tengo el siguiente CSS:
span.rounded:not(.clicked):nth-child(1) { background: red; } Entonces, esto convierte el fondo del primer elemento rounded en red .
Ahora, si hago clic en la palabra some , se aplica una clase en la que se clicked en la etiqueta span de ajuste. El HTML ahora se ve así:
<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>En este punto, espero que los programas de palabras tengan un fondo rojo porque parece satisfacer al selector:
span.rounded:not(.clicked):nth-child(1) { background: red; } Sin embargo, ninguna otra etiqueta se vuelve red . ¿Qué estoy haciendo mal?
¿Cómo puedo hacer que la siguiente etiqueta sea roja después de hacer clic en la actual?
Gracias.
Para resumir los comentarios, y que alguien me corrija si me equivoco en este primer punto, pero esto:
span.rounded:not(.clicked):nth-child(1) { background: red; } No funciona porque siempre encontrará el primer hijo del padre <p> que es un lapso con la clase redondeada, y si no se hace clic en él, aplicará la regla.
Esta solución funciona:
span.clicked + .rounded:not(.clicked)Esto buscará un tramo en el que se haga clic, encontrará el siguiente tramo con la clase redondeada y aplicará la regla solo si no se hace clic en él.