css selector trouble - next sibling

Question

I'm looking for a css selector that selects elements of a class who's immediate successor (if there is one) does not have that class.

So lets say I have a div:

<div>
    <span id="1" class="myClass1">
    <span id="2">
    <span id="3" class="myClass1">
    <span id="4" class="myClass1">
    <span id="5">
</div>

This selector would grab spans 1 and 4.

Is this possible without javascript?

“*Is this possible without javascript?*” - no, CSS has no previous sibling selector. — David Thomas, Nov 30 '18 at 20:53

score 1 · Answer 1 · answered Nov 30 '18 at 20:49

1

Try this selector:

span + span:not(.myClass1) {
  border: 1px solid blue;
}

This is the adjacent sibling selector, coupled with the not() selector.

answered Nov 30 '18 at 20:49

Toby

12,743
8
43
75

1

But OP wants to select the preceding sibling based on the class of the subsequent sibling. – David Thomas Nov 30 '18 at 20:52

css selector trouble - next sibling

1 Answers1