Selecting last consecutive sibling

Question

How do I select the last element in a sequence of adjacent elements?

Consider the following markup:

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>

The number of consecutive foo or bar elements is dynamic. Also, assume the markup cannot be modified in any way.

Selecting adjacent elements is pretty straight forward:

CSS

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

But selecting the last element in a series of consecutive elements, is that possible?

Answer 1

The CSS support for :has is still poor but it can solve the problem:

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