Как сменить цвет символа без тега и класса?

Question

[pet1987]

Есть такой HTML код:

<span class="price">
<span class="price-amount amount">
<bdi><span class="price-currencySymbol">$</span>90</bdi>
</span> – <span class="price-amount amount"><bdi><span class="price-currencySymbol">$</span>550</bdi></span></span>

В последней строке есть символ "-". Нужно через CSS поменять цвет этого символа.
Не получается выбрать селектор для смены цвета. Ведь у этого символа нет ни классов ни тегов.

Answer 1

[Антон Антон]

например так

Answer 2

[Rsa97]

Для span.price установить нужный цвет, для span.price-amount вернуть цвет, который был изначально.

Answer 3

[Рамиль Яббаров]

Засунуть в span нельзя? Тогда только использовать body, html, :root, *. Или родительский элемент, если есть. Или мудрить с JS

Comments

[pet1987]

HTML код менять нельзя.
Может через JS как то можно?

[Рамиль Яббаров]

// Получаем все элементы с классом 'price'
const priceElements = document.querySelectorAll('.price');

// Ищем и выделяем символ '–'
priceElements.forEach(element => {
  element.innerHTML = element.innerHTML.replace('–', '<span style="color: red;">–</span>');
});