CSS: :last-child on list item

Question

If a ul has li items with multiple classes, is it possible to get the last item of a specific class using :last-child?

For example, consider following:

<ul class="test">
    <li class="one">
    <li class="one">
    <li class="one">
    <li class="two">
    <li class="two">
</ul>

I want to add some style to the last li having class "one" (ie. third in the list).

I tried following and it does not work.

ul.test li.one:last-child

I think you haven't searched for it that much? http://stackoverflow.com/questions/6401268/how-do-i-select-the-last-child-with-a-specific-class-name-in-css — paddotk, Jul 04 '12 at 10:14
Same question but (some) different answers. There is value in repetition!! — gonzo, Nov 12 '14 at 14:02

score 26 · Accepted Answer · answered Jul 04 '12 at 10:14

26

That's not possible yet.

:last-child selects the last child, regardless of the tag name, etc.
The possible alternative, :last-of-type selects the last occurrence of a tag. It ignores the class name, etc.

Your only option is to add a specific class name to that element, or use JavaScript to add this class name.

answered Jul 04 '12 at 10:14

Rob W

341,306
83
791
678

Thanks but how the :last-of-type will work in above html example? – user1355300 Jul 04 '12 at 10:21
@user1355300 It won't work as expected. In your example, there's only one type of child, namely `
`. So, `:last-child` and `:last-of-type` selects the same element (the 5th `
`). See http://jsfiddle.net/vEphZ/

Rob W

Jul 04 '12 at 10:28

I know this is an old question, but for future viewers, I think Rob W got the answer right but forgot to put it wholly. This: `ul.test > li:last-of-type` should work to select only the last item in the test list – flen Jun 30 '17 at 01:24

score 5 · Answer 2 · answered Jul 04 '12 at 11:44

5

Instead of giving class for each li, you can go for nth child where you can assign the style by li number.

If you want to give the separate css for your 3rd li then you need to write

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

answered Jul 04 '12 at 11:44

Sowmya

26,684
21
96
136

score 1 · Answer 3 · answered Jul 04 '12 at 10:22

1

You can do it using jquery: http://jsfiddle.net/surendraVsingh/HyAhL/2/

Jquery code:

var n = $('.one').length;
$('.one').eq(n-1).css('color', 'red');

answered Jul 04 '12 at 10:22

SVS

4,245
1
23
28

CSS: :last-child on list item

3 Answers3

Linked