Примените CSS к группе тегов HTML до достижения определенного класса

У меня есть группа меток списка внутри неупорядоченного списка, например:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li>5</li>
  <li>6</li>
</ul>

Вы можете настроить таргетинг на все элементы sibling после с помощью ~

li.active ~ li
{
    color: green;
}

В CSS вы не можете нацеливать братьев и сестер перед элементом, поэтому вам нужно будет сделать что-то вроде этого:

Дайте им все правило:

li
{
    color: orange;
}

Затем перезапишите активный

li.active
{
    color: red;
}

Затем перезапишите их после

li.active ~ li
{
    color: green;
}

Просто, чтобы указать на это, другой способ может быть:

li:not(.active) {
  /* your css rules here */
}

Это будет выбирать каждый li, у которого нет класса .active