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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Posted by Otto Mejia
Otto Mejia
744 Points

Can somebody explain the :nth child selectors for me?

I'm doing the How to Build a Website course and although they explain to me in the video and in the comment on what the :nth child does. I quite don't understand it.

4 Answers

Christian Andersson
Christian Andersson
8,712 Points

Say you have the following markup:

<div>
   <p>Hello</p>
   <p>my</p>
   <p>name</p>
   <p>is</p>
   <p>Chris</p>
</div>

Okay, a silly markup, but a markup nonetheless. Here is some CSS:

p:nth-child(5) {
   font-weight: bold;
}

The above CSS will make the 5th p element bold.

So nth-child is usually used when you have many elements of one kind inside a parent element and you only want to style specific ones. You can select to style the odd elements (1st, 3rd, etc) or even, or pretty much any combination you want!

Otto Mejia
Otto Mejia
744 Points

Thank you. This cleared it up for me a bit.

Otto Mejia
Otto Mejia
744 Points

So one more question. What happens if I have p:nth-child (3n+1). I'm seeing this in the exercises that I'm doing. But I get a bit confused after that.

David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

Off sets it by that amount. Normally you start at 0. So if you had 1,2,3,4,5,6,7,8,9 elements and you have 3n, then it slect 3,6,9. But an offset of one means you start at 1, so its would select every third element starting from one, so its selct 1,4,7. think of it like 3n is + and 1 where you start. So 1+3 is 4, 4+3 is 7 ect.. So normally it without the +1 it be 0+3 is 3, 3+3 is 6 ect.

colingallagher
colingallagher
9,743 Points
colingallagher
colingallagher
9,743 Points

":nth-child(An+B) - The nth-child pseudo-class matches A(n)+B-1 siblings in the document tree. The A value that precedes n is required. By itself, this will match every "nth" element in a group. Both A and B must be integers."

It can be thought of like this:

:nth-child(number) {
    css declarations;
}

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value. Here, we specify a background color for all p elements whose index is a multiple of 3:

p:nth-child(3n+0) {
    background: #ff0000;
}

Hope that helps a bit.

Cheers!

Source

David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

Sure. N-th child always refers to that selector withing its parent container. If you do not define a parent using descendant selector(i.e. body p:nth(){}) then the parent will be HTML

So :nth-child(n) selects a number within its parent container, so if you write p:nth-child(1) it would select the first paragraph within html. When you use n after the number it selects every number-nth of that. so p:nth-child(2n) select every 2 of its type in the parent. So if you have a 4 children every 2nd one would be the second and fourth one.

So if I wrote in html

<!DOCTYPE html>
<html>
<style>
/* This will select the third child if three or more exist in the parent container */
p:nth-child(3) {
  color: blue;
}
/* This will select every 2nd child */
p:nth-child(2n) {
  color: red;
}
</style>
<h3> Body starts a new parent<h3>
<body>
<p>First Paragraph Child of Body</p>
<p>Second Paragraph Child of Body</p>
<p>Third Paragraph Child of Body</p>
<p>Fourth Paragraph Child of Body</p>
<p>Fifth Paragraph Child of Body</p>

<h3> Footer starts a new parent<h3>
<footer>
    <p>First Paragraph Child of Footer, but am the sixth paragraph child of html</p>
    <p>Second Paragraph Child of Body</p>
</footer>

</body>
</html>

See code in action http://jsfiddle.net/asxzuw2n/3/

Otto Mejia
Otto Mejia
744 Points

In the jsfiddle example, why is the <p>Fourth paragraph child of body</p> made into red? You only selected the 3rd and the 2nd.

David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

Because 2n the n tells it to select EVERY nd element in the parent body of that element. So forth is the next 2nd element. Think of it like adding. If you do 2 without the n it select the 2nd child and stops. If you add the n it selects every element +2 in the next. So here its 1,2,3,4. So it select 0+2= 2nd element, then it starts again at 2nd element + 2= 4th element.

David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

Also I am wrong about it stopping at each parent. It will only stop if you specify a parent. body p:nth-child(2), which would only select the body child.

here is the updated version to show where I was wrong and to help you understand. http://jsfiddle.net/asxzuw2n/3/

So if you do
p:nth-child(3n)

if will select every third paragraph in the whole html.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Otto Mejia,

Check out our brand new course on CSS Selectors. It covers :nth-child, :nth-of-type, and lots more. :)