Apply CSS to a group of HTML tags before reaching a certain class [duplicate]

Question

I have a group of list tags inside of an unordered list such as:

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

Is there a way to target all of the list elements before or after the active class via CSS?

Answer 1

You can target all of the sibling elements after with ~

li.active ~ li
{
    color: green;
}

JSFiddle

---

In CSS, you cannot target siblings prior to an element, so you would have to do something like this:

Give them all a rule:

li
{
    color: orange;
}

Then overwrite the active one

li.active
{
    color: red;
}

Then overwrite the ones after

li.active ~ li
{
    color: green;
}

JSFiddle