×

Save to Google Drive

If you have a Google account, you can save this code to your Google Drive.

Google will ask you to confirm Google Drive access.

Warning: The 10th of June 2021, we will discontinue the ability to save to Google Drive.

You will still be able to access your stored code on Google Drive.

×

Open from Google Drive

If you have saved a file to Google Drive, you can open it here:

Warning: The 10th of June 2021, we will discontinue the ability to save to Google Drive.

You will still be able to access your stored code on Google Drive.

Result Size: 625 x 565
x
 
<!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/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("li.start").prevUntil("li.stop", ".first").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
  <ul>ul (parent)  
    <li class="stop">li (sibling with class name "stop")</li>
    <li class="first">li (the previous sibling of li with class name "start")</li>
    <li>li (the previous sibling of li with class name "start")</li>
    <li class="first">li (the previous sibling of li with class name "start")</li>
    <li class="start">li (sibling with class name "start")</li>
    <li>li (sibling)</li>
    <li>li (sibling)</li>
  </ul>   
</div>
<p>In this example, we narrow down the search result by only returning previous sibling elements with class name "first", between the li element with class name "start" and the li element with the class name "stop".</p>
</body>
</html>
×

Report a Problem:

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

help@w3schools.com