Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Advanced Selectors Pseudo-Classes: :nth-child

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi, what if we wanted to select items between the first and last child elements?

Hi, in the :nth-of-child pseudo-classes, we learned how to select, first-child, last-child, only-child, we even learned how to select any(singular) child element and any combination(:nth-child(an+b) and so forth. But these either select a single child element or an even or odd combination of child elements or a group of element that directly precedes or follows a certain child element. But what if we wanted to select a group of elements between the first and last child? This is what I understand so far.

li:first-child {
colof: #fff;
}

will target the first child element.

li:last-child {
colof: #fff;
}

will target the last child element.

li:only-child {
colof: #fff;
}

will target the list item if it is the only child of its parent element.

li:nth-child(2) {
colof: #fff;
}

will target the 2nd list item

li:nth-child(even) {
colof: #fff;
}

will target every even number list element

li:nth-child(2n+3) {
colof: #fff;
}

will first target the third list item then every 2nd list item after that

li:nth-child(-2n+6) {
colof: #fff;
}

will first target the 6th list item then every 2nd list item counting backwards. so it will select, the 6th, 4th and 2nd list items

li:nth-last-child(2n+3) {
colof: #fff;
}

will first target the 3rd list item counting backwards from the last list item then every second list item counting from the third list item from the last list item counting backwards. so if we have 10 list items it would select the 8th, 6th, 4th and 2nd list items. It will look like it selected the 2nd, 4th, 6th, 8th, but it is actually the other way around.

li:nth-last-child(-2n+3) {
colof: #fff;
}

will target the 3rd list item from the last then every 2nd list item going backwards from the direction it was originally going(which is was counting backwards) so now it will count forward. Two negatives make a positive right? so it will target the 8th list item first then the 10th list item.

Did I understand this correctly so far?

However, what if we wanted to select a combination of elements between the first and last child elements for example list elements 4, 5 and 6? or 5,6,7 ONLY? I tried many things using the stuff I've learned so far but couldn't come up with anything.

3 Answers

Hi Samuel,

I think that you have got this down!

Probably the only thing you're missing now is knowing that you can chain together these nth selectors to achieve more complex patterns.

You can chain together like this: li:nth-child(an + b):nth-child(an + b)

The resulting selection will be where the 2 overlap.

So in order to select 4, 5, and 6 only, you could create one expression to select the first 6 only and then another one to select the 4th onwards.

1 2 3 4 5 6 // First 6 only
      4 5 6 7 8 9 10 11 12... // 4th onward

As you can see there, the overlap is 4 5 and 6 and that will be the final selection.

I don't want to spoil the answer for you. I think you can come up with it given your understanding of all the examples above.

You can use this technique to create any kind of isolated group somewhere in the middle.

I went ahead and fixed your post. When typing code on here make sure you use 3 backticks followed by the language you are using with no spaces then on a new line start your typing your code as usual. Here is. A nice visual as to how the nth child works.

http://css-tricks.com/useful-nth-child-recipies/

And here is an article that explains it in detail.

http://reference.sitepoint.com/css/understandingnthchildexpressions

You pretty much got the hang of it.

If I understand what you are saying give this a try it should work.

li:nth-child(3n+2){    
//your css here
}
SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi Jovanny, thanks for the reply. I usually and I was sure I did put them in this. I guess it's the way I wrote it. Sorry about that. Also thanks for the links you provided. That wasn't so much what I was trying to figure out, but Jason explained it in a way I was able to understand. Thanks again.

Wow Jason I didn't know you could do that. I will play with it and when I get stuck again I will probably need your help again. I was able to achieve the results I wanted using the example you gave. I am also playing around with it to see how far I can go. Thanks again guys.