CSS：仅当其中任何一个具有类时，如何有条件地选择最后一个 X nth-last-of-type？

Question

仅使用 CSS，我想选择最后 4 个元素，但前提是其中任何一个元素具有“selected”类。

在代码片段中，您可以在第二行中看到我希望它如何工作。

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;
}
.normal:last-of-type,
.normal:nth-last-of-type(2),
.normal:nth-last-of-type(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>

我从选择最后一个开始：

.normal:last-of-type,
.normal:nth-last-of-type(2),
.normal:nth-last-of-type(3)
{
  background-color: #A00;
}

但后来我无法更进一步；通过阅读 CSS :has() 的描述，我的印象是它和

nth-last-of-type()

的巧妙组合可以让我到达那里，但我不知道应该如何构建选择器的“堆栈”。

是否可以仅使用 CSS 有条件地选择最后 3 个项目（仅当其中一项具有“selected”类时）？ 如果是的话，怎么办？

-编辑- 由于问题已经很接近，因为似乎是 我可以将 :nth-child() 或 :nth-of-type() 与任意选择器结合起来吗？ :

我的问题是，当最后三个 div 中只有一个与任意选择器匹配时，我需要选择最后三个 div 的 ALL，而在链接的问题中，所有选定元素都与选择器匹配。

尝试用另一种方式说，当 3 或 4 或 5 具有“选定”类时，我需要选择元素 3、4 和 5。

Answer 1

你可以尝试

.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>