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

Posted by Ralf Koller
Ralf Koller
4,506 Points

nth-child troubles

So far i've thought i understood nth-child property, but in a recent pattern i ran into serious trouble and i am honestly uncertain how to explain the root of the problem.

I have the following relevant html snippet: 

<section class="projects">
    <h3>Projects</h3>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <p>To the projects</p>
</section>

And i wanted to style and target only the article elements. To my understanding i thought nth-child is targeting the childs of an element. Here a few selectors and the targeted results: 

.projects:nth-child(2)
.projects:nth-child(5n+2)

both have no results in firefinder. i would have expected that article 1 is selected since h3, the three articles and p are the childs of the section element projects

.projects article:nth-child(1) -> no found element
.projects article:nth-child(2) ->article 1
.projects article:nth-child(5n+2) -> article 1
.projects article:nth-child(5n+5)  -> no found element

here i state i want to select nth-child of the articles instead of projects so i would have expected that only the article elements are relevant but nth-child(1) and nth-child(5) return no results. for article 1 element i have to use nth-child(2) . so all childs of projects seem into count but to be found they have to be an article element? i am a little bit confused right now :( best regards ralf

4 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I'm not clear on why you are using nth-child instead of a child selector if you want to select all articles inside project.

However assuming you wanted to use nth-child because you wanted to select a range of elements, say the 2nd through the 5th <article> you could do something like:

 article:nth-child(n+3):nth-child(-n+5)

demo: http://codepen.io/jamesbarnett/pen/tDuLE

read more: http://nthmaster.com/

Ralf Koller
Ralf Koller
4,506 Points

Actually i ran into that issue via a specific problem. I quickly figured out that the root of the problem was selector related and while solving i ran into that general behaviour of nth-child i've misunderstood so far it seems so i generalized my question a bit.

well the initial problem was the following. i have a section with a class of projects in a wordpress template. at the top a h3 and at the bottom an "a" element enclosing the three articles. those three articles are images layed out with the isolation-span mixin of singularity. it is necessary to call each of them separately to apply the mixin on each with different set of settings. since it would be hasslesome to assign unique classes to each article i preferred to go with the nth-child variant.

now i ran into the issue with the mixed type of elements list. especially those puzzled me. 

.projects article:nth-child(1) -> no found element
.projects article:nth-child(2) ->article 1
.projects article:nth-child(5n+2) -> article 1
.projects article:nth-child(5n+5)  -> no found element

even that you narrow the selection down to .projects article, still the elements h3 and p are taken into consideration too. but i've more or less accepted it meanwhile and fixed things. ;) just would have expected some kind of different behaviour like: 

.projects article:nth-child(1) -> article 1
.projects article:nth-child(2) -> article 2
.projects article:nth-child(3) -> article 3

that the nth-child of .projects article targets only three article elements out of the five in sum.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points 
    `>` still the elements h3 and p are taken into consideration too

I think you are confusing :nth-child and :nth-of-type.

With nth-child we are selecting the 3rd to 5th children of projects

.projects *:nth-child(n+3):nth-child(-n+5) { background: lightblue; }

Whereas with as nth-of-type we are selecting the 2nd to 4th <article> elements that are children of projects

/* select the 2nd to 4th article elements that are children of projects*/
.projects article:nth-of-type(n+2):nth-of-type(-n+4) { outline: solid red; }

Check out this article on the Difference Between :nth-child and :nth-of-type to read up more about the differences between these 2 selectors.

Ralf Koller
Ralf Koller
4,506 Points

not exactly confusing it. to be honest it was some kind of an edgecase and nth-of-type would have been the better weapon of choice but the case just puzzled me at first and then interested me. things you described are perfectly clear. i had just the issue with the case

.projects article:nth-child(2)

if there are other element aside article on the same level. would have expected that only articles are taken into consideration on the same level (like nth-of-type). but well your linked article described it perfectly. thanks a lot!!!

Joe Strong
Joe Strong
1,798 Points
Joe Strong
Joe Strong
1,798 Points

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. So .projects article:nth-child(2) matches the first article, because the first article is the 2nd child element of .projects, the h3 tag is the first

Ralf Koller
Ralf Koller
4,506 Points

yeah but what confused me is that i've narrowed the selection down. .projects :nth-child(2) for article1 would be graspable but if i use .projects article i would have expected that the basic set for the nth-child selector would be article elements only and not the two other elements ".projects h3" and ".projects p" as well. that confused me quite a bit.

Michael Pare
Michael Pare
6,358 Points
Michael Pare
Michael Pare
6,358 Points

I just played around with this in Code Pen and got the same results. The root of the problem seems to be that this just isn't a great use-case for nth-child. It is interesting to know how that works, though. Thanks for bringing it up.

I would agree that for this case using a child selector seems to be the best way to go.

Another note on the nth-child selector in general. You always want to select the elements you will be counting, not the parent elements. So to target an li inside of a ul with class "projects" you would write:

.projects li:nth-child() not .projects:nth-child()

If you wanted to use nth-child inside .projects and still be able to select all elements I suppose you could also use:

.projects *:nth-child()

Although in most cases, there is probably a more direct way accomplish what you want.

Michael Pare
Michael Pare
6,358 Points
Michael Pare
Michael Pare
6,358 Points

CSS Tricks also has a good tool for testing how nth-child selections will output http://css-tricks.com/examples/nth-child-tester/#

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Personally I prefer this nth-child playground, I find it more straight forward.

http://www.nealgrosskopf.com/tech/resources/80/

Michael Pare
Michael Pare
6,358 Points

I agree, that one is much cleaner. Thanks!

Ralf Koller
Ralf Koller
4,506 Points

oh nice the nth-child playground i didn't know yet. Nice! Thanks a lot too!