CSS nie selektor rodzeństwa

Question

Rozważmy następujący kod HTML:

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

Jestem zainteresowany selektora (przeszukiwania zawartości, więc nie mogę zmodyfikować html), który wybierze wszystkie iwant że nie mam rodzeństwa z klasą idontwant.

Answer 1

Nie ma selera rodzeństwa, który dopasowałby elementy (lub nie) według klas.

Najbliżej selektor mogę myśleć jest

.iwant:only-child 

Ale to selektor oznacza, że ​​nie może być żadnych innych elementów poza tym div class="iwant" jako dzieci rodzica div, niezależnie od typu lub klasy. Może to zaspokoić twoją potrzebę w zależności od struktury twojego HTML, więc warto spróbować. Jeśli jednak nazwy klas są dla ciebie problemem, to prawdopodobnie nie ma zbyt wiele rozwiązań, ponieważ w CSS nie ma pseudo-klasy :only-of-class, która filtruje według klas i ignoruje resztę.

Answer 2

Brak selektora CSS dla negatywnego rodzica. Użyj wybieraka rodzeństwo, aby ustawić nowe style, a następnie zresetować style w .idontwant:

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

Answer 3

Nie ma dobry sposób, aby kierować element bez konkretnego elementu rodzeństwem. Ale możesz użyć parametru .iwant:last-child, by kierować reklamy na elementy, które nie mają kolejnego rodzeństwa.

Przykład: http://codepen.io/martinkrulltott/pen/YyGgde