Css Selector - Select all siblings until a certain sibling

Question

We wish to avoid an excessive class usage on our code.

We have the following html structure:

<div id='hello'></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id='hello2'></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id='hello3'></div>
<div></div>
<div></div>

How can we select, for example, all divs after #hello, but just until #hello2?

Is this possible using a mere css selector?

Can we achieve this using a script language (jquery) ?

Update:

Despite needing a selector, that indeed work, I need this to be placed inside a javascript conditional... Sorry for not mention it up front and more clearly.

check my answer here http://stackoverflow.com/a/43836549/4251431 — Basheer AL-MOMANI, May 07 '17 at 20:50

score 10 · Answer 1 · answered May 21 '15 at 11:40

10

You don't need JS (nor jQuery framework), it's CSS task.

Use siblings selectors:

<style>
    #hello ~ div {background: red} /* four divs after #hello will be red */
    #hello2, #hello2 ~ div {background: white} /* reset red background to default, #hello2 and all next will be white */
</style>

https://jsfiddle.net/sgdedg9z/

answered May 21 '15 at 11:40

pavel

26,538
10
45
61

1

Actually, I knew that, but, since I need to use it inside a jquery conditional, I'm wondering, if there is a js alternative... – MEM May 21 '15 at 11:46
1

@MEM: in jQuery you can use probably the same selectors as I used above. But the better approach using JS is to set class to `div`s which can be red, not setting styles directly. – pavel May 21 '15 at 11:48
Yes. I will not use this to apply styles. Just to select certain elements that I need for an interaction. If I apply those selectors on a conditional, for example, it will enter the first condition hello ~div, and only gets out later. While in CSS it will read all, and according to the selector specificity it will apply either one thing, or another... So, while this works on CSS and indeed, your answer is correct regarding the CSS, I can't use it, like this, on jquery... (unfortunately). – MEM May 21 '15 at 11:52
Yeah, and what if there is hundreds of hello? smh – Martin Zvarík May 03 '23 at 21:56

score 4 · Answer 2 · edited May 21 '15 at 13:05

4

you can use jquery

$( "#hello" ).nextUntil( hello2, "div" )

https://api.jquery.com/nextUntil/

edited May 21 '15 at 13:05

jbutler483

24,074
9
92
145

answered May 21 '15 at 11:48

Vineeta Mehta

458
1
4
10

droidev · Answer 3 · 2015-05-21T11:58:56.577

You can use CSS sibling selector for getting this, I think that would be better than using scripting since css is faster compared to scripts.

<style>
    #hello ~ div {background: red} /* four divs after #hello will be red */
    #hello2, #hello2 ~ div {background: white} /* reset red background to default, #hello2 and all next will be white */
</style>

if you want the same in jquery

you can use the code below written

  <script>
    $(document).ready(function(){
    var counter = 0;
    $("#hello").find($("Div").each(function () {
        if(counter < 4)    { //set counter value as you need
           $(this).css("color","red");
        }

    }));
    })
//or


$( "#hello" ).nextUntil( hello2, "div" ).css("color","red")    

    </script>

fiddled here

Performance is irrelevant when you consider that the use case precludes using CSS at all. — BoltClock, May 21 '15 at 16:47

score 0 · Accepted Answer · answered May 21 '15 at 14:49

0

OK, you can use nextUntil. But, since you want that for a conditional. You should find a way to get a boolean from this.

For example adding to it, .hasClass()

answered May 21 '15 at 14:49

Alessandro Resta

1,102
1
19
26

Indeed. nextUntil did select the elements, but it was not enough for what I was looking for, because I needed to get a boolean from this. – MEM May 21 '15 at 15:02

Css Selector - Select all siblings until a certain sibling

4 Answers4