Nth of type selector with classes

layout.html

<!-- https://codepen.io/brettdewoody/pen/rrKpPp -->
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

nth-of-type.js

const getCurrentTop = (item) => item.getBoundingClientRect().top

const getItems = () => {
  let items = document.querySelectorAll('li')
  return Array.from(items)
}

const getTops = (arrItems) => {
  let tops = new Set()
  arrItems.map(item => tops.add(getCurrentTop(item)) )
  return Array.from(tops)
}

const run = () => {
  let items = getItems()
  let topsArr = getTops(items)
  items.map((item,idx) => {
    item.className = ''
    topsArr.map((topVal,topIdx) => {
      if(getCurrentTop(item) === topVal) {
        item.className = `l${topIdx}`
      }
    })
  })
  
  // https://bit.ly/3afpgeK
  // This is a work-around for '.class:last-of-type' not working
  for (let i = 0; i < items.length; i++) {
    const prevEl = items[i-1] || null;
    const currentEl = items[i];
    const nextEl = items[i+1] || null;    
    if( nextEl && currentEl.className !== nextEl.className || nextEl === null) {
      currentEl.className = currentEl.className + ' last-of-type'
    }
    if(prevEl === null || prevEl.classList.contains('last-of-type')) {
      currentEl.className = currentEl.className + ' first-of-type'
    }
  }
}

window.onresize = (event) => run()
run()

styles.scss

ul  {
  padding-top: 20px;
  display: flex; 
  flex-wrap: wrap;
  text-align: center;
  justify-content: flex-start;
  
  li {
    width: 200px;
    margin-left: 20px;
    justify-content: center;
    background-color: #222222;
    padding: 20px 0px;
    color: #FFFFFF;
    font-family: Arial;
    min-width: 250px;
    
    &::after, &::before {
      display: inline-block;
      content: '';
      height: 100%;
      width: 15px;
    }
    
    &.l0 {
      background-color: red;
      &.first-of-type {
        &::before {
          background: black;
        }
      }
      &.last-of-type {
        &::after {
          background: purple;
        }
      }
    }
    
    &.l1 {
      background-color: orange;
      &.first-of-type {
        &::before {
          background: grey;
        }
      }
      &.last-of-type {
        &::after {
          background: blue;
        }
      }
    }
    
    &.l2 {
      background-color: yellow;
      &.first-of-type {
        &::before {
          background: lightgrey;
        }
      }
      &.last-of-type {
        &::after {
          background: green;
        }
      }
    }
    
    &.l3 {
      background-color: green;
      &.first-of-type {
        &::before {
          background: white;
        }
      }
      &.last-of-type {
        &::after {
          background: yellow;
        }
      }
    }
    
    &.l4 {
      background-color: blue;
      &.first-of-type {
        &::before {
          background: brown;
        }
      }
      &.last-of-type {
        &::after {
          background: orange;
        }
      }
    }
  }
}