Get (N-1)th last item on the page

Question

I have a number of elements with specific css class on the page (let's say item). Is it possible to apply a css style on the (N-1)th .item? For example it there are 9 elements then I need to style 8th.

I know about :nth-last-child(2). But it doesn't work in my case. It searches for CHILD elements but in my case elments are distributed between different parents.

jsFiddle of what I need

score 4 · Accepted Answer · answered May 02 '13 at 22:39

4

use the child combinator selector (>) with body along with @Zenith's solution

body > :nth-last-child(2)

http://jsfiddle.net/fWRw8/2/

answered May 02 '13 at 22:39

MikeM

27,227
4
64
80

heh, sorry to steal your thunder – MikeM May 02 '13 at 22:40
I need to apply style for the 2nd occurence of certain element on the page. – Sergey Metlov May 02 '13 at 22:50
is the 2nd to last item nested in different ways? what are you trying to solve? if the item is sort of a moving target you'll likely need JavaScript – MikeM May 03 '13 at 01:08
given your last jsfiddle, this fiddle has both a static CSS selector and a dynamic jQuery option that may help you http://jsfiddle.net/fWRw8/6/ – MikeM May 03 '13 at 01:10
so sad. I hoped to the last that it's possible with CSS only without JS. ok, thank you – Sergey Metlov May 03 '13 at 09:03

score 3 · Answer 2 · edited May 23 '17 at 12:12

3

Yes, you can use the :nth-last-child(2) selector to get the second-last element.

Here's a jsFiddle example.

This isn't supported in older versions of IE, so here's a link to a quick hack which will get it working there too.

Edit: In regard to your specific use case, sadly it looks like there isn't any real solution using just CSS. My initial thoughts were :nth-last-of-type but as you're basing it on a class and with different parents that won't work. :nth-last-child is also based on the parent so that won't help either. Sadly, there is no class-related selectors similar to these either so I'm afraid to say you may have to do it via. jQuery.

edited May 23 '17 at 12:12

Community

1
1

answered May 02 '13 at 22:28

dsgriffin

66,495
17
137
137

No, it doesn't work. It searches for CHILD elements but in my case elments are distributed between diferent parentsd. – Sergey Metlov May 02 '13 at 22:30
This doesn't work in IE8 or earlier... is this going to be an issue for the OP? – Matthew Cox May 02 '13 at 22:32
@SergeyMetlov Ok, I'll try and work out a solution in regard to the edit now – dsgriffin May 02 '13 at 22:36
@Zenith Hot ... never knew about this library! – Matthew Cox May 02 '13 at 22:40
@FeistyMango Oh wait, Selectivr only supports first-child and nth-child but not nth-last-child, I'll try to make an IE8 compatible alternative – dsgriffin May 02 '13 at 22:44

Get (N-1)th last item on the page

2 Answers2