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
Justin Nuckols
1,264 PointsI don't understand the nthchild psuedo-selector: why it's used, how it's used, or what it even means.
Please help.
6 Answers
Steven Parker
231,248 PointsYou would use nth-child when you want to select items based on the order they occur within a parent element. For example, if you had a table and wanted the color of the text in every 3rd column to be red, you might use this:
td:nth-child(3n) { color: red; }
What this means is to apply this CSS to every third td element inside the same parent (presumably a tr). Since we said 3n, that would be the 3rd, 6th, 9th, etc. If we had used just 3 instead, it would apply only to the 3rd.
There are other ways you can identify elements by order, too. Instead of 3n you could use something more complex:
table.striped td:nth-child(3n+2) { color: red; }
This means to color "the second column, then every third column after that inside a table with the striped class". You can also use the terms odd and even as arguments to nth-child.
For more descriptions and examples, take a look at w3schools, or MDN, both good CSS reference sources. Also, here is a cute interactive example.
Sergey Podgornyy
20,660 PointsThe :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.
n can be a number, a keyword, or a formula.
I recommend you to learn this course about selectors - https://teamtreehouse.com/library/css-selectors. Guil Hernandez explained very well about this type of selectors
Here is video about nth-child - https://teamtreehouse.com/library/css-selectors/advanced-selectors/nthchild
Justin Nuckols
1,264 PointsThank you Steven and Sergey!
Thinking mathematically is not something that comes naturally to me- so when I start to encounter formulas and word/number combinations and symbols that represent ideas I am unfamiliar with, my brain slows down. Words and complete sentences are much more meaningful and easy to interpret, because I can break down each piece and analyze the definition of each- and how they relates to the task at hand. I will check out all of the links. I think the css-selectors course will be especially helpful!
-Justin
Justin Nuckols
1,264 Points*they relate
Steven Parker
231,248 PointsI think you'll particularly enjoy the interactive example link I just added to my original post.
Justin Nuckols
1,264 PointsFor some reason, I'm still not passing the quiz question, which asks me to clear the left side of every fourth list item in the element with the id of "gallery".
Here's what I have:
gallery li:nthchild(4n) {
clear: left;
}
Not sure what I'm doing wrong!
Sergey Podgornyy
20,660 Points#gallery li:nth-child(4n) {
clear: left;
}
Justin Nuckols
1,264 PointsI do have the pound sign before the gallery selector, it's just not showing up.
Justin Nuckols
1,264 PointsHoly smoke...I just forgot the dash.
Thanks!
Steven Parker
231,248 PointsGood to hear you completed the challenge. Remember to choose a "best answer". :)
Sergey Podgornyy
20,660 PointsSteven, I will choose your answer, as the best one ;)