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 Abhishek Neogi
.a{fill-rule:evenodd;}techdegree
Abhishek Neogi
Front End Web Development Techdegree Student 995 Points

I don't understand the nth child concept. Can someone please explain?

I was following along with responsive web dev in Nick's Front End Web Dev track and right after media queries, he introduces the nth child pdseudoclass.

I feel totally lost about how it works even though he showed by executing the code. I don't get what's this nth child thing about.

Can someone please explain this and help me out? :0

3 Answers

Michael Davis
Michael Davis
Courses Plus Student 12,508 Points

For some reason, i can't directly reply to your question, so I'm posting it as another answer.

There is a lot more information ab out the psudoclasses coming your way in the "Front End Web Development" track, if that is the track you are on. The formula for nth-childofan+bcounts **all** children, regardless of type. Later, you will learn the selector:nth-of-type` which will only count children of a certain type. This is all covered in the CSS Selectors* class. I would recommend not to dwell too much into the intricacies of the selector just yet, and if you really are wanting to get the information "now", the link to the CSS Selector class is

https://teamtreehouse.com/library/css-selectors

EDIT:

p:nth-child(3n) {
   ...
}

This selects the <p> element that is the 3rd child of its parent. If the 3rd child is something else (let's say the <h1> tag you added) then this rule will never take affect because this <p> tag will never be the 3rd child. This is where the :nth-of-type comes into play. Again, that lecture is latter in the track.

Abhishek Neogi
.a{fill-rule:evenodd;}techdegree
Abhishek Neogi
Front End Web Development Techdegree Student 995 Points

Okay, thanks a lot :) I went through the Teacher's notes and it made the concept a lot clearer! :)

Now I understand that it's possible to background-color every 1st element in each row by using 3n +1 for the nth-child element. So using that logic and in that sense, we can also use:

p: nth-child(2n*2) { background-color: #fff; }

To color every 1st item with white, in each row I mean. Right?

Michael Davis
PLUS
Michael Davis
Courses Plus Student 12,508 Points
Michael Davis
Michael Davis
Courses Plus Student 12,508 Points

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

For example:

#someID:nth-child(3n) {
...
}

This would select every third child of the element with the ID of 'someID' and apply the formatting. In Nick's lecture, he uses the "nth-child()" to ensure that every 4th element started on a new line.

Here's a link to the W3C page on "nth-child"

Abhishek Neogi
.a{fill-rule:evenodd;}techdegree
Abhishek Neogi
Front End Web Development Techdegree Student 995 Points

Hi, I am now beginning to understand the nth-child pseudoclass a bit better after going through that link :) Thank You

However I still have some questions which are lurking in my head after going through the W3C page.

Does HTML count from 0 to 9 or from 1 to 9 where the nth-child is concerned? I've noticed hexadecimal color codes work from 0 to 9, so was wondering about the nth-child element as well.

-Secondly, regarding the formula an + b (in this case 3n + 0), n represents a cycle size and 0 is the offset value according to the link

However, when I add in an <h1> element right before the paragraph tags, the nth-child pseudoclass starts working on every even numbered element (multiples of 2 instead of 3 in the 3n) Why is that?

And what are parent elements in the context of nth-child? Can they be nested elements or elements in succession (one after the other instead of being nested in each other) Or are parent elements the ones at the top?

I don't get which one's the parent element because clearly, the code mentioned p: nth-child(3n+0){ background: #fff;} However when I throw in a headline element in the HTML body, the nth-child function changes and it shows up even numbered coloring on those paragraph texts.

Lastly, what's a cycle size and an offset value in this case?

Thanks for bearing with me! Really want to grasp this concept better :)

Rob Allessi
Rob Allessi
8,600 Points
Rob Allessi
Rob Allessi
8,600 Points

Here's a visual tester that I found helpful in wrapping my head around the nth child selectors: http://lea.verou.me/demos/nth.html

Abhishek Neogi
.a{fill-rule:evenodd;}techdegree
Abhishek Neogi
Front End Web Development Techdegree Student 995 Points

What's with all that dt and dd? o_o Sorry, was terrible at math lol

But thinking of picking it up and relearning. Never thought I could learn to code before but now being proven wrong so thinking the same about math. :)