4

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?

Poem
  • 51
  • 4
  • I believe the style selector you used when trying to solve your problem can only be used for inline styles. I don't think there is a pure css solution for your problem but someone corrects me please if I'm wrong. Are you looking for a css only solution? – Getter Jetter Sep 05 '20 at 16:57
  • after reading how sensitive the attribute selector was, I tried adding or removing this space, as well as the final semicolon, and translating the color to "rgb(153, 204, 0)", with or without spaces between the decimals -- but that didn't work – Poem Sep 05 '20 at 17:01
  • @OlivierKrull In the context of a Stylish theme, would a non-css-only solution be practicable? Or would you suggest perhaps using a more in-depth modifying tool, like greasemonkey? – Poem Sep 05 '20 at 17:05

1 Answers1

0

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>
dantheman
  • 3,189
  • 2
  • 10
  • 18