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

HTML How to Make a Website Responsive Web Design and Testing Refactor the Layout

Emily Salm
Emily Salm
1,366 Points
Posted by Emily Salm
Emily Salm
1,366 Points

nth-child code challenge

Hi - The code challenge that I am doing asks me to clear the 4th item of every list item in the gallery (in the media query). Here is what I wrote:

gallery li.nth-child (4) {

clear: left;

}

It continues to error every time I submit this. Can someone please point out what I am doing wrong? Thank you!

Emily

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

Is there an error or are you just getting "Bummer!!" ? Have you tried a different property value such as clear: both;

Emily Salm
Emily Salm
1,366 Points
Emily Salm
Emily Salm
1,366 Points

Richard Duncan - I was getting "Bummer!!" (How irritating!) Anyhow - all is resolved now.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The instruction say "Inside the media query, clear the left side of every 4th list item in the gallery."

I'm surprised that it passes with :nth-child(4) This could be a bug. This only clears the 4th item, not every 4th list item.

I feel it should be :nth-child(4n)

4 Answers

rayorke
rayorke
27,709 Points

Hi Emily!

nth-child is a pseudo-class. Pseudo-classes are added to the selector with a colon ":" rather than a period "." Also, make sure there isn't a space between the pseudo-class and the argument.

So, it would look something like the following (without giving away the complete answer):

li:nth-child(4)

I hope that helps!

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Make sure you put you have a "#" in front of gallery and a colon needs to be put between "li" and "nth-child".

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Hi Emily, try this:

.gallery ul li:nth-child(4) 
{  
  clear: left; //are you sure its clear:left not both?
}
Emily Salm
Emily Salm
1,366 Points
Emily Salm
Emily Salm
1,366 Points

Thanks all for the feedback! The hashtag and colon resolved everything.