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 CSS Selectors Advanced Selectors :nth Pseudo-Class Challenge

Eric Athanas
Eric Athanas
7,311 Points
Posted by Eric Athanas
Eric Athanas
7,311 Points

Clear a float with nth child

I have no idea what I'm doing wrong. I must have forgotten how to clear a float...

In this step I have to select every 3rd child after the 4th one and I also have to add a clear for the float. Would I not put the clear inside the img selector? When I do it says that it cancelled out the first test (make a left float) and when I put it after the nth child rule, it just says "did you type 'clear: left'? So I'm really confused...

style.css 
/* Write the CSS in the media query below */

@media (min-width: 607px) {
  img {
    float: left;
    clear: left;
  }
  img:nth-child(3n+4);
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <img src="thumb-forest.jpg" alt="">
    <img src="thumb-resort.jpg" alt="">
    <img src="thumb-trees.jpg" alt="">
    <img src="thumb-falls.jpg" alt="">
    <img src="thumb-view.jpg" alt="">
    <img src="thumb-sunset.jpg" alt="">
    <img src="thumb-lake.jpg" alt="">
    <img src="thumb-beach.jpg" alt="">
    <img src="thumb-bay.jpg" alt="">
    <img src="thumb-peaks.jpg" alt="">
    <img src="thumb-falls.jpg" alt="">
    <img src="thumb-resort.jpg" alt="">
</body>
</html>

1 Answer

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Hi Eric,

You are supposed to add another clear left inside the img nth child, that's all. 

@media (min-width: 607px) {
  img {
    float: left;
    clear: left;
  }
  img:nth-child(3n+4) {
  clear:left;
  }
}
Eric Athanas
Eric Athanas
7,311 Points
Eric Athanas
Eric Athanas
7,311 Points

Thank you so much, Salman—It worked! However, isn't this a time when DRY should apply? If I already put the float and clear properties in the first img selector, shouldn't that apply to all the images?

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Yes I understand but we are applying specifically to 3rd child of image to make it left float except 1st and 2nd child, not all images.

Eric Athanas
Eric Athanas
7,311 Points
Eric Athanas
Eric Athanas
7,311 Points

Ahh I see. Thank you, Salman!