Stili yalnızca sonraki öğenin belirli bir sınıfı varsa nasıl uygulanır?

Question

Biçimlendirme:

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

nasıl eklerim .active sonraki kardeş ilk .divider yalnızca bir stil?

.divider + .active'u düşünüyordum, ancak bu stilleri .active'a uygular.

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

Answer 1

Artık itibariyle CSS bir önceki öğeyi seçemezsiniz

, ya elle sınıfını hedef olduğunu neler yapabileceğini

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

gibi kendisine bazı farklı sınıfını sağlayan Ve basitçe

kullanmak yerine göre Else

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

o li

ilk çocuğu ise, Sen c Eğer değilse ul.class_name li:first-child kullanın, nth-of-type(n), n yerine li numaranızı kullanın, bu şekilde sınıfları da aramanıza gerek yoktur. Örneğin

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

için

yukarıdaki seçici olduğunu belirtilen sınıf adı ile ul elemanın 2nd çocuğu seçecektir.

---

Hala CSS'den memnun değil misiniz? Sen JS/jQuery çözümü seçebilirler, ancak biçimlendirme statik ise, seni nth kullanmayı öneririm ve erişiminiz varsa biçimlendirme için her stil istediğiniz elemana en az çağrı sınıfı ..

---

Not: li doğrudan çocuk olarak yuva li etiketi,

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

Answer 2

Bu bir hack var .. aşağıda için işaretlemenizi değiştirmeyi düşünün, ama bu olabilir sizin için eser olamaz:

<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 bugün itibariyle bu doğrudan destek yok, ama jQuery nispeten acısız yapar ve bu varsayarak projeniz için bir gerekliliktir, iyi geçmesini yol olabilir.

böyle jQuery yılında

yazılı olurdu şey: Burada

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

Answer 4

bir Fiddle

CSS

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

jQuery

bulunuyor