:nth-child(expression)

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
loftinsulation
Forum Newbie
Posts: 4
Joined: Sat Feb 06, 2010 12:55 pm

:nth-child(expression)

Post by loftinsulation »

Hello,

Given that, say,

Code: Select all

:nth-child(4n)
matches [0, 4, 8, ...], I was just wondering what something like

Code: Select all

:nth-child(-n+4)
would match?

Thanks very much.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: :nth-child(expression)

Post by pickle »

I've not seen any practical examples where n is negative. What happens when you try it?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
loftinsulation
Forum Newbie
Posts: 4
Joined: Sat Feb 06, 2010 12:55 pm

Re: :nth-child(expression)

Post by loftinsulation »

Probably should have given this a bit more thought before posting, as on reflection it seems fairly obvious. Assuming negative values return nothing, (-n+4) yields [3, 2, 1, 0, -1, ...] for n = 1, 2, 3..., and so this should give the first three elements of a set (given 1 based css indicies). Hmm, yes, refelection; always a good idea.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: :nth-child(expression)

Post by pickle »

It might be better then to just do :nth-child(0), :nth-child(1), :nth-child(2).
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
loftinsulation
Forum Newbie
Posts: 4
Joined: Sat Feb 06, 2010 12:55 pm

Re: :nth-child(expression)

Post by loftinsulation »

Yes, that is probably true - certainly would make things more readily readable. I was just wondering about the use of negatives in expressions such as this, since I'd been reading about :nth-child and it wasn't mentioned. Although assuming it does work as I'm guessing above (haven't actually tested it yet), it does seem quite a nice solution to selecting the first x rows.
Post Reply