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
David O' Rojo
11,051 PointsAlternative notation should be accepted for this code changenge.
In the previous video is stated that :nth-child(3n+1) is a superior option to select every 4th element in the gallery, but the evaluator only accepts :nth-child(4n) as the right answer.
Edit: Just found the link to email tech support. I hope they'll handle it.
Jason Anello
Courses Plus Student 94,610 PointsHi Chris,
I'm not sure what you mean here. :nth-child(3n + 1) and :nth-child(4n) will select different elements. You have to use the one that's correct for your situation. They're not interchangeable.
I think that you're talking about selector efficiency and you should use more efficient selectors when you can.
David O' Rojo
11,051 PointsHi guys. Thanks for your comments and your answers.
I'm not sure if you've watched the version of the project that raised this post, but in the videos the :nth-child(3n+1) selector was used to tackle a bug that could break the design when the :nth-child(4n) selector was used. In the video are explained the use and effects of both and why in this specific situation they were interchangeable. The code challenge used the same kind of code that the one in the video, so is natural to think in using the best option for the design, solving the challenge right after watching the lesson.
Jason Anello
Courses Plus Student 94,610 PointsHi David,
As far as I know, :nth-child(3n + 1) was a correction made in the Teacher's notes but did not appear in any video.
It might help to look at what each of these selectors are selecting side by side.
:nth-child(3n + 1) - 1, 4, 7, 10, 13, 16, and so on
:nth-child(4n) - 4, 8, 12, 16, 20, 24, and so on
I suppose you could consider them interchangeable for up to 6 elements because they both correctly select the 4th child which is at the beginning of the second row. Beyond 6 items they're not interchangeable. So in the general case of an unknown number of items :nth-child(3n + 1) is the correct solution for a 3 column layout.
The instructions for task 2 were: "Inside the media query, clear the left side of every 4th list item in the gallery."
The point I was trying to make was that based on these instructions, :nth-child(4n) is the one that selects every 4th item if you look at the lists above. :nth-child(3n + 1) does not select every 4th item. So it doesn't meet the requirement of the instructions.
The wording would have to be changed in order for :nth-child(3n + 1) to be the correct answer.
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsI think that based on how the instructions are worded 4n would still be the correct answer. This does select every 4th item. I think that the wording would have to be changed if 3n + 1 is going to be the correct answer.
Also, 3n + 1 doesn't select every 4th element. It selects the 1st element and then every 3rd element after that.
I think that the code challenge has problems though. It passes with several different incorrect expressions.
Chris Shaffer
12,030 PointsJason Anello mention that it's in your best interest to use the one that requires the least number of steps to reach the target.
I was speaking in generalities, not saying 3n+1 is the same as 4n. For example, you could use a selector to count x# of times from the start or end and this may coincidentally reach the same element as 4n, but 4n requires less math to be processed to make that conclusion.
It's more of a rule of thumb that helps prevent mistakes and excess coding.
Also, in the context of his question, he is right that (actually) n + 4 would select the 4th element, but it would also select every 4th element thereafter. The rule of thumb I'm referring to helps you to think through that logic and say "do I want to select the 4th element only?" and "how do I select that? I could do it like this, but then I get more than I want" or I could do it like this, etc. but think through it in a way that you start with the simplest form.
Chris Shaffer
12,030 PointsChris Shaffer
12,030 PointsAs a general rule of thumb (which I learned from Codecademy :) ), you should use the selector or designation which requires the browser to take the least number of steps to reach the target.
While :nth-child(3n+1) is actually wrong, there may be other ways that in this unique case you can still target that 4th element, but (4n) is the most specific with the least number of steps (counting, etc.) for the browser.