Choosing the last consecutive brother

Question

How to select the last element in a sequence of neighboring 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 elements fooor baris dynamic. In addition, suppose that the markup cannot be changed in any way.

The selection of adjacent elements is pretty straight forward:

CSS

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

Can I select the last item from a series of consecutive items?

Answer 1

You have to dynamically tune the list ... in this case, specify a name or identifier for the last item and add the css effect you want ....

, , , ( , , )

Answer 2

nth-last-child:

http://css-tricks.com/almanac/selectors/n/nth-last-child/

,

: nth-last-child ,

bingo.

, :

<ul>
   <ul>
       <li class="foo">foo 1</li>
       <li class="foo">foo 2</li>
       <li class="foo">foo 3 bingo</li>
   </ul>
   <ul>
       <li class="bar">bar 1</li>
       <li class="bar">bar 2</li>
       <li class="bar">bar 3</li>
       <li class="bar">bar 4 bingo</li>
    </ul>
    <ul>
       <li class="foo">foo 1</li>
       <li class="foo">foo 2 bingo</li>
    </ul>
</ul>

css :

.foo:nth-last-child(1),
.bar:nth-last-child(1)
{
    background-color: blue;
}