get last child when using Flex order Css

I am not able to detect last child when using flex order to rearrange divs. since I have arranged order of CSS with Order. its still getting the last child as per dom tree. items divs are dynamic. so we cant use nth-child. how should I get the last child when rearranged with order. There can be multiple items that need to be shown on top. I need CSS or js based solution. my code

    <div class="mainWrap">
     <div class="item">first</div>
     <div class="item">second</div>
     <div class="item orderFirst">third</div>
     <div class="item">fourth</div>
     <div class="item orderFirst">fifth</div>
     <div class="item">Six</div>
     <div class="item orderFirst">Seven</div>
    </div>

    <style>
    .mainWrap {display:flex; flex-direction: column;}
    .mainWrap .item {order:2; border-bottom:1px solid #ccc}
    .mainWrap .item:last-of-type {border-bottom:none;}
    .mainWrap .item.orderFirst {order:1;}
    </style>

Answer

If you’re really determined to do it like this, you can use javascript to find the last element that doesn’t have the orderFirst class and style that. This does seem like a mis-use of the order property, though.

const mainWrap = document.querySelector(".mainWrap");

const children = [...mainWrap.children];
const ordered = children.filter((c) => !c.classList.contains("orderFirst"));

const last = ordered.pop();
last.style.setProperty("border-bottom", "none");

.mainWrap {
  display: flex;
  flex-direction: column;
}

.item {
  order: 2;
  border-bottom:1px solid #ccc;
}

.item.orderFirst {
  order: 1;
}

<div class="mainWrap">
  <div class="item">first</div>
  <div class="item">second</div>
  <div class="item orderFirst">third</div>
  <div class="item">fourth</div>
  <div class="item orderFirst">fifth</div>
  <div class="item">Six</div>
  <div class="item orderFirst">Seven</div>
</div>