[Solved] Tricky :nth-child question

[rzea]

Ok, so I was reading https://css-tricks.com/how-nth-child-works/ (and looking around the web) about the :nth-child pseudo class and I can’t find anything related to the issue I have:

Is there a way to select, for example, the element before the last regardless of how many elements you have?

For example: I have a list of horizontal links in a nav bar, but I need to select the one before the last one regardless of how many links I have in that nav bar.

Does this make sense? Can that be done using the :nth-child pseudo class?… or in any other way for that matter?

I’ve been cracking my head with this one for several days already.

Thanks.

[Chris Coyier]

Great question! And, I don’t really think so, not with :nth-child or CSS anything anyway.

With jQuery, I’d go something like:

var $collection = $("li");

var numberOfThem = $collection.length;

var nextToLast = $collection[numberOfThem - 1];

so nextToLast is a DOM node of the next to last list item.

[rzea]

Ok, so, how do you ‘select’ it to be able to style it? If you already are in your code, I apologize, I’m not a jQuery/JavaScript person so, honestly, I have no idea what you just wrote ^_^

Thanks for your reply.

[jamygolden]

Copy and paste this into an HTML file and you should be able to figure it out:

List Item


List Item


List Item


List Item


List Item


List Item


List Item

It’s not as awesome as Chris’s example, but it’s easier to understand :p

[Chris Coyier]

Careful here:

$('li')[3].addClass('second-last');

When you pull an item out of the array like that it becomes a DOM node and jQuery specific functions like addClass will not work on it anymore. You’d have to do:

$('li').eq(3).addClass('second-last');

to have that work. And remember that’s 0-indexed just like arrays =)

[yoboubdir]

I reused the example by jamy_za, and this time whitout the jQuery/Javascript thing, You can use this :

List Item


List Item


List Item


List Item


List Item


List Item


List Item

[Chris Coyier]

There I go again, overcomplicating things. :nth-last-child is definitely the way to go.

[cpj238]

:nth-last-child(2) is smart, but with all :nth-childs they’re not supported in IE, so using JQuery with :nth-last-child(2) would be the best overall solution, if you are concerned with cross browser support.

I’ll definitely remember this one though, nice one!

[jamygolden]

@chriscoyier I was actually just trying out the $('li')[3].addClass('second-last'); becuase I saw you use it lol, it wasn’t actually meant for @rzea but thanks for the array info =)

P.S. I’ve been quite interested in the “least expensive” methods lately and I was wondering, do you know if $('li').eq(0) less expensive than $('li:first'). I remember coming across a site that allowed you to test that kind of thing in different browsers, but I’ve lost the url :/

[Chris Coyier]

I can’t say offhand, you’d have to run some tests. I’ve seen lots of tests where the equivalent jQuery function is faster than the CSS selector, so I wouldn’t be surprised at all if .eq() is faster.

cpj238 has a smart point too, if you use the CSS selector in jQuery, it will work.

[Jayj]

*forget it, it had been said*

[rzea]

Mr. yoboubdir, that was EXACTLY the kind of answer I wanted to read :).

So there IS a way in CSS to select an element in a list starting from the last element:

:nth-last-child(x)

Now, regardless that :nth-last-child(x) is not supported by IEx, well, too bad for them users as far as styling goes, as long as the content is accessible, readable and indexable, I’d prefer this method over JS.

Nonetheless, the JS examples are very helpful too.

Dang, I’m glad I asked.

Thanks guys!

PS. There should be a way to give reputation points, chosen answer, etc. in these forums :)

[Author]

Posts