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
Reagen Rahardjo
3,770 Pointsclear item for the nth-child
Hi,
In the video, it says because one of the images text is too long it makes the 4th image going into the wrong place, and then it use the nth-child(4n) to select the 4th item and clear: left; to fix it
My question is whats the function of clear: left here? what is it to be clear? when the picture going to the wrong place and have empty space on the left, is the browser assume there an empty item there so the picture going into the wrong place?
Thank You
1 Answer
Mark Pesantes
13,179 PointsSo typically a float based layout (which I assume is what is being used here) will take all elements and shift them to the right/left of each other. So say you have a list of items with all of their children receiving float: left. The 5th item in this instance gets pushed to the right of said element, but what you may want is for it to "clear" underneath the 4th item.
I made a small code pen which illustrates this concept for you: http://codepen.io/anon/pen/NNJxwO if you want to see what clear does just take .item5 and remove the clear.
Chris Coyier has an extremely useful article on nth-child here: https://css-tricks.com/useful-nth-child-recipies/
I hope this helps you further understand the concept!