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 · Answer 1 · 2011-10-23T14:51:13.043

75

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

700,868
160
1,392
1,356

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

Berci · Accepted Answer · 2022-10-27T14:49:01.490

If anyone still needs this, I found this answer . Based on it and on :not pseudo-class, the initial requirement can be accomplished using something like:

div:not(:has(+ .idontwant)) .iwant { 
  ... 
}

This approach has an advantage over the general sibling combinator: It also matches backwards, meaning something like:

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

(so if you have the .idontwant element first -> case which would be ignored by the general sibling combinator)

Explanation:

div:has(+ .idontwant) would match any div that has a direct sibling with the class idontwant
div:not(:has(+ .idontwant)) matches any div that doesn't have a direct sibling with class idontwant
All is left to do is search in the div that doesn't have a direct sibling with class idontwant for the class we want.

The selector is quite weird and big, but does the job, and I think there are (specific) cases where is quite needed.

score 5 · Answer 3 · 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,916
2
25
37

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

4

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

341,306
83
791
678

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

score 0 · Answer 5 · answered Sep 08 '22 at 09:28

0

This also might be helpful - if the element you want is always last-child:

div:last-child:not(.idontwant) {

}

answered Sep 08 '22 at 09:28

Denis Khay

3,510
1
10
6

CSS no sibling selector

5 Answers5

Linked