コンテキスト (質問はスキップしてください): オンライン タイピング ゲーム Typeracer (Css) のスタイリッシュなテーマを設計しているときに、次の問題に遭遇しました。
ユーザーが作業を進めると、既に入力されたテキストの部分が灰色から緑色に変わります。この緑色を他の色に変更したいと思います。 Typeracer でのテキスト プログレス インターフェースの外観
難しいのは、このブロックが ID なしで複数のスパンに分割され、複数のランダムなクラス (ゲームごとに異なるもの) が割り当てられ、レース中に変化することです: テキスト進行インターフェイスのアーキテクチャの例
上のスクリーンショットでは折りたたまれており、私たちには関係のない最後のスパンは別として、さまざまな数のスパンが既に入力されたテキストの部分を表し、さまざまな数の他のスパンが入力されていない部分を表しています。まだ入力されていません (上のスクリーンショットでは、最初の 2 つのスパンには「入力された」部分が含まれていますが、最後の 2 つのスパンは「入力されていない」部分を表しています。しかし、同じレースの後半では、これらの数字は 1 と 2、または 3 と 2 になる可能性があります。 1等）
ただし、既に入力されたテキストを表すスパンと、まだ入力されていないテキストを表すスパンが同じ最初のクラスを共有していることに気付きました。最初のクラスであり、「まだ入力されていない」部分のスパンには、最初のクラスとして「CARsHknB」があります。
代わりに、style.color 属性でスパンの最初のグループを選択しようとしました。
.span[style*="color: #99cc00;"] {
color: #ff0000;
}
しかし、結果を得ることができませんでした。
質問: css を使用して、そのクラスが何であるかを具体的に知らなくても、同じ最初のクラスを共有する子要素を選択することは可能ですか?
たとえば、親 div が次の場合:
<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>
「vdFKqLpl」と「CARsHknB」はランダムに属性が付けられたクラスであり、事前に知ることはできませんが、最初のクラスとして「vdFKqLpl」を共有する最初の 2 つの div を選択することは可能ですか?