Получить значение атрибута для другого элемента данного класса

Question

У меня есть серия кнопок, у каждой есть индекс.

Выбрана одна из кнопок с классом .selected.

Есть ли способ создать селектор, который говорит: «Найдите мне кнопку, индекс которой на X меньше индекса кнопки с классом .selected?

И затем потенциально использовать значение X внутри моего правила?

Кстати, я делаю это в приложении React, и я использование CSS для доступа к «скрытым» элементам в стороннем компоненте (то есть элементам, которые компонент не предоставляет мне). Так что, если есть способ сделать это в моем JS, это также приемлемо.

Вот пример, смоделированный:

        <div>
          <button type="button" className="picker-opt" opt-index="0">0</button>
          <button type="button" className="picker-opt" opt-index="1">1</button>
          <button type="button" className="picker-opt picker-opt-selected" opt-index="2">2</button>
          <button type="button" className="picker-opt" opt-index="3">3</button>
          <button type="button" className="picker-opt" opt-index="4">4</button>
        </div>

И есть произвольное количество кнопок, может быть 100 кнопок , И я хочу выбрать кнопки, окружающие выбранную (.picker-opt-selected)

Я могу получить кнопки после с помощью:

.picker-opt-selected {
   // THE selected option
  color: orange;

  // options AFTER the selected option
  & ~ .picker-opt {
    color: green;
  }

  // option(s?) TWO AFTER the selected option
  & ~ .picker-opt ~ .picker-opt {
    color: red;
  }
}

Но я возникают проблемы с получением до выбранного.