[SuperZen]

<ul>
  <li class="slonik">slonik 1</li>
  <li class="begemotik">begemotik 2</li>
  <li class="begemotik">begemotik 3</li>
  <li class="begemotik">begemotik 4</li>
  <li class="slonik">slonik 5</li>
  <li class="slonik">slonik 6</li>
  <li class="slonik">slonik 7</li>
  <li class="begemotik">begemotik 8</li>
  <li class="begemotik">begemotik 9</li>
</ul>

<script type="text/javascript">
  document.querySelector('ul').addEventListener('click', this)
  handleEvent = (e) => {
    var sibling = e.target
    while (true) {
      if (!sibling.previousElementSibling || !sibling.previousElementSibling.classList.contains(e.target.className)) break
      sibling = sibling.previousElementSibling
    }
    while (sibling) {
      if (!sibling.classList.contains(e.target.className)) break
      else sibling.style.color = 'red'
      sibling = sibling.nextElementSibling
    }
  }
</script>

мои 5 копеек %)