CSS hiçbir kardeş seçicisi

Question

şu html düşünün:

<div> 
    <div class="iwant" /> 
    <div class="idontwant" /> 
</div> 
<div> 
    <div class="iwant" /> 
</div> 

Ben sınıfı ile kardeşi var YAPMAYIN tüm iwant seçeceklerini ifade (yani html değiştiremezsiniz içeriği tarama) bir selektör ilgileniyorum idontwant.

Answer 1

Öğeleri (veya değil) sınıf ile eşleştirmek için bir kardeş seçici yok. Aklıma

yakın selektör

.iwant:only-child 

olduğunu Ama bu selektör türden bağımsız veya sınıfın ebeveyn div çocukları olarak o div class="iwant" dışında başka unsurlar olmayacağı anlamına gelir. Bu, HTML'inizin yapısına bağlı olarak ihtiyacınızı karşılayabilir, bu yüzden denemeye değer. Sınıf isimleri sizin için bir sorun olsa da, o zaman muhtemelen bir çözüm çok fazla değil, çünkü sınıf tarafından filtrelenen ve geri kalanı yok sayan bir CSS içinde bir :only-of-class sözde sınıf yoktur.

Answer 2

Negatif kardeşi CSS seçicisi yok. Sonra .idontwant de stilleri sıfırlama, yeni stiller ayarlamak için kardeş seçici kullanın:

div.iwant { 
    /*Set CSS here*/ 
    display: inline; 
} 
div.iwant ~ div.idontwant { 
    /*Reset CSS*/ 
    display: block /* Default of DIV is block*/ 
} 

Answer 3

belirli kardeş öğesi olmadan bir öğeyi hedeflemek için iyi bir yol yoktur. Ancak, sonraki bir kardeşi olmayan öğeleri hedeflemek için .iwant:last-child'u kullanabilirsiniz.

Örnek: http://codepen.io/martinkrulltott/pen/YyGgde