title: Is it possible to select children sharing the same Css class, without knowing that class ahead?
body: <p><strong>Context (skip ahead for question):</strong>
  While designing a Stylish theme for the online typing game, Typeracer (in Css), I stumbled on this problem:</p>
  <p>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.
  <a href="https://i.stack.imgur.com/1ULC2.png" rel="nofollow noreferrer">What the text progress interface looks like on Typeracer</a></p>
  <p>What makes it difficult, is that this block is broken into multiple spans, without any id, which get assigned <em>multiple</em> random classes -- different ones every game, and which <em>change during the race</em>:
  <a href="https://i.stack.imgur.com/9ykRa.png" rel="nofollow noreferrer">Example of the architecture of the text progress interface</a></p>
  <p>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 &quot;typed&quot; portion, while the last two spans represent the &quot;not typed&quot; portion. But later in the same race, these numbers may become 1 and 2, or 3 and 1, etc.)</p>
  <p>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 <em>first</em> class: in the example from screenshot #2, the &quot;typed&quot; portion spans have &quot;vdFKqLpl&quot; as their first class, and the &quot;not typed yet&quot; portion spans have &quot;CARsHknB&quot; as their first class.</p>
  <p>I have attempted to select the first group of spans by their style.color attribute instead:</p>
  <pre><code>.span[style*=&quot;color: #99cc00;&quot;] {
      color: #ff0000;
  }
  </code></pre>
  <p>But I could not get any results.</p>
  <p><strong>Question:</strong>
  Is it possible, using css, to select children elements sharing the same <em>first</em> class, without specifically knowing what that class is?</p>
  <p>For example, if the parent div is:</p>
  <pre><code>&lt;div&gt;
      &lt;span unselectable=&quot;on&quot; class=&quot;vdFKqLpl&quot;&gt;When the little bluebird, who has never said a word, starts to sing, &lt;/span&gt;
      &lt;span unselectable=&quot;on&quot; class=&quot;vdFKqLpl CARsHknB&quot;&gt;&quot;Spri&lt;/span&gt;
      &lt;span unselectable=&quot;on&quot; class=&quot;CARsHknB WvLvCiod&quot;&gt;n&lt;/span&gt;
      &lt;span unselectable=&quot;on&quot; class=&quot;CARsHknB&quot;&gt;g&lt;/span&gt;
      &lt;span unselectable=&quot;on&quot;&gt;...&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Where &quot;vdFKqLpl&quot; and &quot;CARsHknB&quot; are <em>randomly attributed classes which I cannot know ahead</em>,
  is it possible to select the first two divs, which share &quot;vdFKqLpl&quot; as their first class?</p>