Блог

Главная - Вопросы по программированию - Можно ли выбрать дочерних элементов, использующих один и тот же класс Css, не зная, что класс впереди?

Можно ли выбрать дочерних элементов, использующих один и тот же класс Css, не зная, что класс впереди?

#html #css #stylish

#HTML #css #стильный

Вопрос:

Контекст (пропускаем вопрос вперед): Разрабатывая стильную тему для онлайн-игры для набора текста Typeracer (в Css), я наткнулся на эту проблему:

По мере продвижения пользователя часть уже введенного текста становится серой на зеленую. Я хотел бы изменить этот зеленый цвет на любой другой. Как выглядит интерфейс выполнения текста в Typeracer

Что затрудняет, так это то, что этот блок разбит на несколько пролетов без какого-либо идентификатора, которым присваивается несколько случайных классов — разные в каждой игре, и которые меняются во время гонки: Пример архитектуры текстового интерфейса прогресса

Оставляя в стороне самый последний интервал, который свернут на скриншоте выше и нас не интересует — различное количество интервалов представляет часть текста, которая уже была введена, и различное количество других представляют часть, которая еще не была введена (На скриншоте выше первые два интервала содержат «типизированную» часть, в то время как последние два интервала представляют «не типизированную» часть. Но позже в той же гонке эти числа могут стать 1 и 2 или 3 и 1 и т.д.)

Однако я заметил, что интервалы, представляющие уже введенный текст, и интервалы, представляющие текст, который еще не был введен, имеют один и тот же первый класс: в примере со снимка экрана # 2 «типизированные» интервалы имеют «vdFKqLpl» в качестве своего первого класса, а интервалы «еще не типизированные» имеют «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» являются случайно приписанными классами, которые я не могу знать заранее,
можно ли выбрать первые два divs, которые используют «vdFKqLpl» в качестве своего первого класса?

Комментарии:

1. Я полагаю, что селектор стилей, который вы использовали при попытке решить свою проблему, можно использовать только для встроенных стилей. Я не думаю, что для вашей проблемы существует чистое CSS-решение, но кто-нибудь поправит меня, пожалуйста, если я ошибаюсь. Вы ищете решение только для css?

2. прочитав, насколько чувствителен селектор атрибутов, я попытался добавить или удалить этот пробел, а также последнюю точку с запятой и перевести цвет в «rgb (153, 204, 0)», с пробелами между десятичными знаками или без них — но это не сработало

3. @OlivierKrull В контексте стильной темы было бы целесообразно решение, не основанное только на css? Или вы бы предложили, возможно, использовать более подробный инструмент изменения, такой как greasemonkey?

Ответ №1:

Я не знаю, будет ли это работать полностью, но это может приблизить вас.

 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>