Select last element with a specific class

Question

Is it possible to select the last element that has a certain class?

For example:

<div id="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item">Select</div>
    <div class="item1"></div>
</div>

So in this example select the last class element .item.

I know you can just add an extra class to that element, but i'm wondering if i can do this with just a selector in css.

jsFiddle

Things i'v already tryed:

:last
:last-child
:last-type-of

You cannot select `last of class` using a pseudo-class like that. Either add an extra class or use JQuery. — Paulie_D, Nov 05 '13 at 11:51
possible duplicate of [how to use nth-of-type for classes -- not elements](http://stackoverflow.com/questions/19468639/how-to-use-nth-of-type-for-classes-not-elements) — Paulie_D, Nov 05 '13 at 11:52
possible duplicate of [How do I select the "last child" with a specific class name in CSS?](http://stackoverflow.com/questions/6401268/how-do-i-select-the-last-child-with-a-specific-class-name-in-css) — George, Nov 05 '13 at 11:54
@oGeez I've read that topic and the answer did add an extra class, which actually didn't want. — nkmol, Nov 05 '13 at 12:33

Liam Sorsby · Accepted Answer · 2013-11-05T12:28:13.627

0

you can use :last-child however on your jsfiddle you are using

.item:last-child
{
    background: red;
}

use

#wrapper :last-child
{
    background: red;
}

however i'm not sure that would work unless the last child is actually the last element in the container

you could try jquery

$(".item").last().css( "background-color", "red" );

edited Nov 05 '13 at 12:28

answered Nov 05 '13 at 11:52

Liam Sorsby

2,912
3
28
51

1

As you said, this will select the last element. I want the last `.item` element :) – nkmol Nov 05 '13 at 12:25
i think jquery is in order then see my update in my post at the bottom – Liam Sorsby Nov 05 '13 at 12:27
1

Maybe a little bit cheeky, as i did not tag javascript or jQuery. But this is an alternative that i find usefull :) so thank you! – nkmol Nov 05 '13 at 12:31

score 0 · Answer 2 · answered Nov 05 '13 at 11:54

0

See documentation

E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one

http://www.w3.org/TR/css3-selectors/#selectors

well, in your case

div.item:nth-last-child(1)

answered Nov 05 '13 at 11:54

smnbbrv

23,502
9
78
109

That works in the given example, but in the general case where you want the last element with a given class, not necessarily the last child, that doesn't help. – Mark Reed Nov 05 '13 at 11:55
why not use "body item:nth-last-child(1)" then? – smnbbrv Nov 05 '13 at 11:57
http://jsfiddle.net/W82Uz/2/. Your solution matches "the last element, but only if it has the item class". We want "the last element that does have the item class, even if more elements without the class come after it". – Mark Reed Nov 05 '13 at 12:03
This code just calculates from the last index back. The defining of the element class is not even needed here: `#wrapper :nth-last-child(2)`. If my element is on a other index, this code would not work :) – nkmol Nov 05 '13 at 12:28

score -3 · Answer 3 · answered Nov 05 '13 at 12:03

-3

#wrapper .item:last-child
{
background: red;
}

Before doing that just change the last item class item1 to item. that's it

answered Nov 05 '13 at 12:03

StreetCoder

9,871
9
44
62

Select last element with a specific class

3 Answers3

Linked