Is it possible to select children sharing the same Css class, without knowing that class ahead?

Question

Context (skip ahead for question): While designing a Stylish theme for the online typing game, Typeracer (in Css), I stumbled on this problem:

As the user progresses, the portion of the text already typed turns from gray to green. I would like to change this green color, to any other. What the text progress interface looks like on Typeracer

What makes it difficult, is that this block is broken into multiple spans, without any id, which get assigned multiple random classes -- different ones every game, and which change during the race: Example of the architecture of the text progress interface

Leaving aside the very last span, which is collapsed on the screenshot above, and does not interest us -- a varying number of spans represent the portion of the text which was already typed, and a varying number of others represent the portion which was not typed yet (In the screenshot above, the first two spans contain the "typed" portion, while the last two spans represent the "not typed" portion. But later in the same race, these numbers may become 1 and 2, or 3 and 1, etc.)

I have however noticed that the spans representing the text already typed, and the spans representing the text which was not typed yet, share the same first class: in the example from screenshot #2, the "typed" portion spans have "vdFKqLpl" as their first class, and the "not typed yet" portion spans have "CARsHknB" as their first class.

I have attempted to select the first group of spans by their style.color attribute instead:

.span[style*="color: #99cc00;"] {
    color: #ff0000;
}

But I could not get any results.

Question: Is it possible, using css, to select children elements sharing the same first class, without specifically knowing what that class is?

For example, 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 attributed classes which I cannot know ahead, is it possible to select the first two divs, which share "vdFKqLpl" as their first class?

Answer 1

I don't know if this will work completely, but this could get you closer.

span {
  color: green;
}
span[class*=" "], span[class*=" "] ~ span {
    color:red;
}

<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>
</div>