Applicare i CSS per un gruppo di tag HTML prima di raggiungere una certa classe

Question

Ho un gruppo di tag lista all'interno di una lista non ordinata come ad esempio:

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

Esiste un modo per indirizzare tutti gli elementi dell'elenco prima o dopo la classe attiva tramite CSS?

Answer 1

È possibile indirizzare tutti gli elementi di pari livello dopo con ~

li.active ~ li 
{ 
    color: green; 
} 

JSFiddle

---

In CSS, non è possibile indirizzare i fratelli prima di un elemento, in modo che avrebbe dovuto fare qualcosa del genere:

Dare a tutti una regola:

li 
{ 
    color: orange; 
} 

Poi sovrascrivere quello attivo

li.active 
{ 
    color: red; 
} 

Poi sovrascrivere quelli dopo

li.active ~ li 
{ 
    color: green; 
} 

JSFiddle

Answer 2

Giusto per farlo notare, in un altro modo potrebbe essere:

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

Questo selezionerà ogni li chi non ha la classe .active