Is it possible to target the first and last displayed element of a reordered flexbox?

Issue

After reordering dynamically the elements of a flexbox, is it possible to target the first and last displayed elements?

I'm reordering some elements in the flexbox based on a dynamically provided class. So there are .item-s .item.to-back-s. I want to turn off the right border for the last .item that is not a .item.to-back and also for the last .item.to-back.

How may I approach this?

Minimal Reproducible Example:

.flex{
 display: flex;
}

.item {
  border: 1px solid grey;
  padding: 0.25em;
}


.to-back {
  order: 2;
}

<div class="flex">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item to-back">3</div>
 <div class="item">4</div>
 <div class="item to-back">5</div>
 <div class="item">6</div>
<div>

I tried:

.item:not(.to-back):first-child {
  border-right: none;
}

Solution

You can now do this with nth-child(n of x) selector

.item {
  height: 50px;
  width: 50px;
  border: 5px solid lightblue;
  background: green;
}

.wrap {
  display: flex;
  gap: .5em;
}


/* re-order to end */

.to-back {
  background: gold;
  order: 2;
}


/* last item with second class */

:nth-last-child(1 of .to-back) {
  border-right-color: red;
}


/* last item without second class*/

.item:nth-last-child(1 of :not(.to-back)) {
  background: #000;
}

<div class="wrap">
  <div class="item"></div>
  <div class="item to-back"></div>
  <div class="item to-back"></div>
  <div class="item to-back"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answered By - Paulie_D