4

I have two elements with defined ids having any html between them, for example:

<div id='d1'>Hello</div>

<!-- Here come any html code -->
<div>Example</div><hr/><a href="">Example</a>

<div id='d2'>World</div>

Is there CSS selector that selects all the elements between #d1 and #d2?

rlib
  • 7,444
  • 3
  • 32
  • 40

1 Answers1

2

Answer: No.

But you always have the option of JQuery:

$('#id').nextUntil('#id2')

Keep in mind, the .nextUntil method selects all elements in between, exclusive. To select the elements including the two elements, use this:

$('#id').nextUntil('#id2').andSelf().add('#id2')


<!DOCTYPE html>
<html>
<head>
<style>
.siblings * { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("li.start").nextUntil("li.stop").css({"color": "red", "border": "2px solid red"});
  
    $("li.start1").nextUntil("li.stop1").andSelf().add("li.stop1").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>

    <p>Just selecting all elements in between, exclusive.</p>
  
<div style="width:500px;" class="siblings">
  <ul>ul (parent)  
    <li>li (sibling)</li>
    <li>li (sibling)</li>
    <li class="start">li (sibling with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li class="stop">li (sibling with class name "stop")</li>
  </ul>   
</div>
  
  <p>Just selecting all elements in between, inclusive.</p>
  
<div style="width:500px;" class="siblings">
  <ul>ul (parent)  
    <li>li (sibling)</li>
    <li>li (sibling)</li>
    <li class="start1">li (sibling with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li class="stop2">li (sibling with class name "stop")</li>
  </ul>   
</div>

</body>
</html>

In my opinion, that's the easiest option.

Mingle Li
  • 1,322
  • 1
  • 15
  • 39
  • 2
    *"you always have the option of JQuery"* - "**always...**" more like never at this point of the web (2020) – vsync Jun 04 '20 at 09:46
  • @vsync jQuery is still awesome, even 5 years later. – Mingle Li Jun 04 '20 at 13:34
  • 1
    many web apps today run on React / Angular / vue and other lesser-used ones, and most of jQuery users are wordpress websites, which are very much the majority still, but the statement that you can **always** use jQuery isn't not so true, because if you work for a company that uses a framework such as describe above, then you cannot. So the word "always" is not true, more like "probably", but that depends on the product architecture. You cannot simply import jQuery to a React project, that is bad. – vsync Jun 04 '20 at 17:01
  • @vsync Definitely agree, but if you need jQuery in a React project, then you're doing something wrong. But importing jQuery into a standard webpage for simple DOM manipulation without having to go through the hassle of setting up React/Angular/etc is still a viable option, I would think. – Mingle Li Jun 05 '20 at 16:33
  • Personally I love jQuery, it's a collection of well-written extremely handy functions, which are much easier to work with than native DOM. React apps don't need direct DOm access, don't need the event binding and not the Ajax methods...so basically nothing is left for jQuery to add to those apps. – vsync Jun 05 '20 at 20:22