Alla esimerkin koodaukset:

JQuery, head-elementtiin:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("li.start").prevUntil("li.stop").css({"color": "red", "border": "2px solid red"});  
});
</script>

CSS-ohje:
.lista * { 
  display: block;
  color: grey;
  padding: 5px;
  margin: 5px;
}

HTML-koodaukset:

<div style="width:500px;" class="lista">
  <ul>ul-elementti  
    <li class="stop">1. li-elementti jolla tunniste stop</li>
    <li>2. li-elementti</li>
    <li>3. li-elementti</li>
    <li>4. li-elementti</li>
    <li class="start">4. li-elementti jolla tunnite start</li>
    <li>6. li-elementti</li>
    <li>7. li-elementti</li>
  </ul>   
</div>