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").prevAll().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>1. li-elementti</li>
    <li>2. li-elementti</li>
    <li>3. li-elementti</li>
    <li class="start">4. li-elementti jossa class-tunniste</li>
    <li>4. li-elementti</li>
    <li>6. li-elementti</li>
  </ul>   
</div>