提问人：Parduz 提问时间：11/14/2023 最后编辑：Parduz 更新时间：11/14/2023 访问量：58
CSS：如何有条件地选择最后 X 个倒数第二个类型，只有当它们中的任何一个都有类时？
CSS: how to conditionally select the last X nth-last-of-type only when any of them has a class?
问：
仅使用 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()
仅当最后 3 个项目具有“selected”类时，是否可以仅使用 CSS 有条件地选择最后 3 个项目？ 如果是，如何？
-编辑- 由于问题很接近，因为似乎是 我可以将 ：nth-child（） 或 ：nth-of-type（） 与任意选择器组合在一起吗？
我的问题是，当只有一个 div 与任意选择器匹配时，我需要选择最后三个 div 中的所有 ALL，而在链接的问题中，所有选定的元素都与选择器匹配。
换一种说法，当 3 或 4 或 5 具有“selected”类时，我需要选择元素 3、4 和 5。
答：
2赞
Temani Afif
11/14/2023
#1
你可以试试。当容器中有一个元素，并且该元素是最后 3 个元素之一时，请选择最后 3 个元素.container:has(.selected:nth-last-of-type(-n + 3)) > :nth-last-of-type(-n + 3).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;
}
.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>评论
0赞
Moob
11/14/2023
好！比我的答案好。请点赞！
0赞
Burham B. Soliman
11/14/2023
很好，但这里有一个问题，即某些浏览器默认不支持伪浏览器，因此在这种情况下对于某些用户来说没有意义:has
0赞
Parduz
11/15/2023
非常感谢，这项工作非常出色，它只需要更改“3”即可使其适用于我想要突出显示的任何数量的元素。
1赞
Moob
11/14/2023
#2
它可以通过 和 的组合来完成。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>评论
0赞
Parduz
11/15/2023
多谢！虽然我已经接受了另一个 anwer，因为它更实用，但您想教我每行到底做什么吗？
评论
.normalnth-typediv