CSS no sibling selector

Question

Consider the following html:

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

I'm interested in a selector (for crawling content so I can't modify html) that would select all iwant that DO NOT have sibling with class idontwant.

Answer 1

There is no sibling selector to match elements (or not) by class.

The closest selector I can think of is

.iwant:only-child 

But this selector means that there cannot be any other elements besides that div class="iwant" as children of the parent div, regardless of type or class. This may fulfill your need depending on the structure of your HTML though, so it's worth a try. If class names are a problem for you, though, then there probably isn't much of a solution, because there isn't an :only-of-class pseudo-class in CSS which filters by class and ignores the rest.

Answer 2

There's no good way to target an item without a specific sibling item. But you can use .iwant:last-child to target items that doesn't have a subsequent sibling.

Example: http://codepen.io/martinkrulltott/pen/YyGgde