html - 选择最后一个连续的 sibling

Question

如何选择相邻元素序列中的最后一个元素？

考虑以下标记:

HTML

<ul>
    <li class="foo">...</li>
    <li class="foo">...</li>
    <li class="foo">...</li> <!-- bingo -->

    <li class="bar">...</li>
    <li class="bar">...</li>
    <li class="bar">...</li>
    <li class="bar">...</li> <!-- bingo -->

    <li class="foo">...</li> <!-- bingo -->

    <li class="bar">...</li>
    <li class="bar">...</li> <!-- bingo -->
</ul>

连续的 foo 或 bar 元素的数量是动态的。此外，假设不能以任何方式修改标记。

选择相邻元素非常简单:

CSS

.foo + .foo, 
.bar + .bar { /* do something */ }

但是选择一系列连续元素中的最后一个元素，这可能吗？

Answer 1

CSS对:has的支持还是很差，但可以解决问题:

/* selects any .foo that has no .foo immediately after it  */
.foo:has(+ :not(.foo)) {}