How can I select the last list item of a specific class in a list of items?

Question

<ul>
    <li class="special"></li>
    <li class="special"></li>
    <li class="special"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

In this example I would like to target only the last .special list item. Is this possible using only CSS?

@Mr.Alien Thank you for answering. I don't understand why my question was downvoted and marked as a possible duplicate when it is it not. I get whoever marked it as such didn't even read it. — bernk, Mar 03 '14 at 14:03
@bernk I hardly hardly downvote, but it is duplicate, so it is marked as duplicate :) — Mr. Alien, Mar 03 '14 at 14:05
It's a duplicate, but it's not a duplicate of *using last-child*. — kojiro, Mar 03 '14 at 14:06

score 0 · Answer 1 · answered Mar 03 '14 at 14:04

0

You cannot achieve it by using pure CSS.

I'd suggest alternative way by using javascript, or more specific jQuery by utilizing :last selector:

$('ul li.special:last').css('color','red');

answered Mar 03 '14 at 14:04

Felix

score 0 · Answer 2 · answered Mar 03 '14 at 14:07

0

Using css alone, check this out. Working Fiddle

li:nth-child(3){
color:#f00;
}

answered Mar 03 '14 at 14:07

Binita Lama

Thanks, but this only works if the list is static. In my case it is not. – bernk Mar 03 '14 at 14:09
In that case, Felix's solution can help. – Binita Lama Mar 03 '14 at 14:11

score 0 · Answer 3 · answered Mar 03 '14 at 14:19

0

Maybe it helps if you target the first non-special element like this:

ul .special + li:not(.special) { background: red; }

answered Mar 03 '14 at 14:19

Iulian Anghel

score 0 · Answer 4 · answered Mar 03 '14 at 14:30

0

If you know it's always three items you could do something like this

.special + .special + .special {
    // your styles
}

answered Mar 03 '14 at 14:30

Colin Bacon

4 Answers4