While I was creating a customized theme for the online typing game, Typeracer (using Css), I encountered an issue: As the user advances in the game, the color of the typed text changes from gray to green. I want to change this green color to a different one. Here is how the text progress interface appears on Typeracer
The challenge is that the text block is divided into multiple spans, without any id, and they are assigned various random classes -- different ones for each game, and they change during gameplay: This image shows the structure of the text progress interface
Except for the last span shown as collapsed in the screenshot above, a dynamic number of spans depict the already typed text, and another dynamic number represent the text that is yet to be typed (In the screenshot, the initial two spans show the "typed" text, while the last two represent the "not typed" text. But these numbers can change during the game to 1 and 2, or 3 and 1, and so on.)
I observed that the spans for typed text and text yet to be typed share the same initial class: in the example from screenshot #2, the spans for "typed" text have "vdFKqLpl" as their initial class, while those for "not typed yet" have "CARsHknB" as their initial class.
I tried selecting the first group of spans based on their style.color attribute:
.span[style*="color: #99cc00;"] {
color: #ff0000;
}
However, I did not achieve any results.
My Question is: Is it possible to use css to select child elements that share the same initial class without knowing what that class is specifically?
For instance, if the parent div is:
<div>
<span unselectable="on" class="vdFKqLpl">When the little bluebird, who has never said a word, starts to sing, </span>
<span unselectable="on" class="vdFKqLpl CARsHknB">"Spri</span>
<span unselectable="on" class="CARsHknB WvLvCiod">n</span>
<span unselectable="on" class="CARsHknB">g</span>
<span unselectable="on">...</span>
</div>
Where "vdFKqLpl" and "CARsHknB" are randomly assigned classes that I cannot predict in advance, is it feasible to select the first two divs that share "vdFKqLpl" as their initial class?