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.

BoltClock · Accepted Answer · 2011-10-23T14:51:13.043

70

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.

edited Oct 23 '11 at 14:51

answered Oct 23 '11 at 14:43

BoltClock

665,005
155
1,345
1,328

It might be a solution but I prefer something more general because there might be extra `div`s. Good thinking though. – Chris Hasiński Oct 23 '11 at 14:52

score 5 · Answer 2 · answered Sep 25 '15 at 05:21

5

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

answered Sep 25 '15 at 05:21

Martin

1,836
2
25
37

score 3 · Answer 3 · answered Oct 23 '11 at 14:45

3

There's no negative-sibling CSS selector. Use the sibling selector to set new styles, then reset the styles at the .idontwant:

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

answered Oct 23 '11 at 14:45

Rob W

328,606
78
779
666

That's redundant since each class is mutually exclusive. – BoltClock Oct 23 '11 at 14:45
@BoltClock What do you mean by that? The `div.iwant ~ div.idontwant` selector is more specific than `div.iwant`. – Rob W Oct 23 '11 at 14:47
2

I'm not setting styles, I want to get those element for crawler and I would prefer to do it in one query. – Chris Hasiński Oct 23 '11 at 14:50

CSS no sibling selector

3 Answers3

Linked