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

Jordan Bartholomew
Jordan Bartholomew
5,926 Points
Posted by Jordan Bartholomew
Jordan Bartholomew
5,926 Points

CSS Selectors - :nth Pseudo-Class Challenge - Task #2 Could not figure this out.

We want three floated images per row. In the media query, create a pseudo-class selector that targets the fourth img child element first, then every third img that follows. Then, add a clear property that clears the left float.

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

@media (min-width: 607px) {
  clear: left;
}

img:nth-child(3n+4) {
  float: left;
}
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>
Mauricio Hernandez
Mauricio Hernandez
7,208 Points

Have a blessed day.

1 Answer

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hi Jordan,

You have the right idea with the nth-child pseudo-selector, but there are a few things to point out.

First, the challenge asks that all CSS be written inside the media query. Notice that your img:nth-child rule is outside.

Second, your "clear: left" statement, although written inside the media query, doesn't belong to any selectors. It is just there on its own with no targeted element.

If you re-read task 1, they want you to first float all of the images to the left. Since you are on task 2, you must have completed this successfully.

On task 2, they want you to target the fourth image at first, then every third element after that and clear: left. You are using the correct selector, but you are attempting to float them all to the left again, not clear them.

To pass this you need to leave your code from task 1 unchanged and then build another rule to only target the elements specified in task 2.

@media (min-width: 607px) {

  img {
    float: left;
  }

  img:nth-child(3n+4) {
    clear: left;
  }

}

Good luck.

Jordan Bartholomew
Jordan Bartholomew
5,926 Points
Jordan Bartholomew
Jordan Bartholomew
5,926 Points

Thank you so much! I see where I went wrong.

Mauricio Hernandez
Mauricio Hernandez
7,208 Points

Thank you, have a blessed day.