你可以尝试.container:has(.selected:nth-last-of-type(-n + 3)) > :nth-last-of-type(-n + 3)。当容器中有一个.selected的元素，并且该元素是最后3个元素之一时，选择最后3个

let sel=0;
setTimeout(setSelected, 1000);

function setSelected() {
  document.getElementById("d"+sel).classList.remove("selected");
  document.getElementById("j"+sel).classList.remove("selected");

  if (++sel>5) sel = 0;
  document.getElementById("d"+sel).classList.add("selected");

  // This is only to show what i would like to get with CSS selectors
  document.getElementById("j"+sel).classList.add("selected");
  if (sel>=3) {
    document.getElementById("j3").classList.add("active");
    document.getElementById("j4").classList.add("active");
    document.getElementById("j5").classList.add("active");
  }else{
    document.getElementById("j3").classList.remove("active");
    document.getElementById("j4").classList.remove("active");
    document.getElementById("j5").classList.remove("active");
  }
  setTimeout(setSelected, 1000);
}

.container {text-align: center;}
.normal, .example {
  display: inline-block;
  width: 3rem;
  color: white;
  background-color: #004;
  text-align: center;
  border: 2px solid transparent;
}

.container:has(.selected:nth-last-of-type(-n + 3)) > :nth-last-of-type(-n + 3) {
  background-color: #A00;
}
.selected{
  background-color: #0A0;
  border: 2px solid #0A0;
}
.active{background-color: #A00;}

<p>CSS Only</p>
<div class="container">
  <div id="d0" class="normal selected">0</div>
  <div id="d1" class="normal">1</div>
  <div id="d2" class="normal">2</div>
  <div id="d3" class="normal">3</div>
  <div id="d4" class="normal">4</div>
  <div id="d5" class="normal">5</div>
</div>
<p>example with Javascript</p>
<div class="container">
  <div id="j0" class="example selected">0</div>
  <div id="j1" class="example">1</div>
  <div id="j2" class="example">2</div>
  <div id="j3" class="example">3</div>
  <div id="j4" class="example">4</div>
  <div id="j5" class="example">5</div>
</div>

它可以通过nth-last-of-type()和:has的组合来完成。

/* For demo. Set .selected on click */
const items = document.querySelectorAll(".container > div");
items.forEach(item => {
  item.addEventListener('click', onclick);
});

function onclick(){
    document.querySelector(".selected").classList.remove("selected")
   this.classList.add("selected");
}

.selected {
  outline:2px dotted;
}
/* Test if relational pseudo-classes are supported. At the time of writing Firefox is lagging behind. */
@supports selector(:has(*)) {
  /* 
  If the last nth is selected
  or HAS a subsequent sibling which is selected
  then highlight it and the siblings: 
  */
  .container div:nth-last-of-type(3):is(.selected),
  .container div:nth-last-of-type(3):has(~.selected),
  .container div:nth-last-of-type(3):is(.selected) ~ div,
  .container div:nth-last-of-type(3):has(~.selected) ~ div {
    background: green;
  }
}

click an item:
<div class="container">
  <div id="d0" class="normal selected">0</div>
  <div id="d1" class="normal">1</div>
  <div id="d2" class="normal">2</div>
  <div id="d3" class="normal">3</div>
  <div id="d4" class="normal">4</div>
  <div id="d5" class="normal">5</div>
</div>