Come applicare lo stile solo se l'elemento successivo ha una classe specifica?

Question

Markup:

<li class="divider"></li> 
<li class="active"><a href="#">Home</a> 
<li class="divider"></li> 
<li><a href="#">Blog</a></li> 

Come posso aggiungere uno stile al primo .divider solo se .active è la prossima fratello?

Stavo pensando a .divider + .active ma che applicherebbe gli stili a .active.

.divider { 
    border-left: 1px solid #d0d0d0; 
} 
.active { 
    background: #fff; 
} 
// when the next sibling is .active, border-color: transparent; 

Answer 1

Non è possibile selezionare un elemento precedente in CSS fin d'ora, che cosa si può fare è né indirizzare manualmente la classe, fornendo un po 'di classe distinta ad esso come

<li class="divider target_me"></li> 

E che semplicemente utilizzare

ul.class_name li.target_me { 
    /* Styles goes here */ 
} 

Altrimenti, se è il primo figlio di li

è c un uso ul.class_name li:first-child, se non lo è, basta usare nth-of-type(n), sostituire n con l'ennesimo numero del tuo li, in questo modo non è necessario chiamare anche le classi.

Per esempio

ul.class_name li:nth-of-type(2) { 
    /* Styles here */ 
} 

È possibile che questo selettore si seleziona 2nd figlio di ul elemento con quel nome classe specificato.

---

Ancora non felice con i CSS? Si può optare per una soluzione JS/jQuery, ma se il markup è statico, vorrei suggerire di utilizzare nth e se si ha accesso a markup si può atleast classe chiamata sull'elemento che si desidera stile ..

---

Nota: non è possibile nido li tag da usare come figlio diretto a li, pensare di cambiare il vostro codice di seguito ..

<ul> 
    <li> 
     <a href="#">Home</a> 
     <ul> 
      <li>Sub</li> 
     </ul> 
    </li> 
</ul> 

Answer 2

E 'un hack, ma questo potrebbe lavoro per voi:

<div class='third'>third</div> 
<div class='second active'>second</div> 
<div class='first'>first</div> 

div { 
    color: black; 
    float: right; 
} 

.active + .first { 
    color: pink; 
} 

Fiddle

Answer 3

CSS non ha il supporto diretto per questo fin d'ora, ma jQuery rende relativamente indolore, e supponendo che questo è un requisito per il progetto, potrebbe essere la strada da percorrere.

qualcosa

In jQuery sarebbe scritto in questo modo:

if element.next().hasClass('active'){ 
    element.addClass('divider') 

Answer 4

Ecco un Fiddle

CSS

.divactive { 
    border-left: 1px solid transparent; 
} 

jQuery

$(function() { 

    $('.active').prev('.divider').addClass('divactive'); 

    //or 

    $('.active').prev('.divider').css({ 'border-left': '1px solid transparent' }); 

});