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

Benjamin Wert
Benjamin Wert
3,024 Points
Posted by Benjamin Wert
Benjamin Wert
3,024 Points

What am I doing wrong?

Am I displaying the clear property incorrectly? What am I missing?

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

@media (min-width: 607px) {
  img:nth-child(3n+4) {
    float: left;
    clear: 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>

2 Answers

Artem Shturkin
PLUS
Artem Shturkin
Courses Plus Student 8,359 Points
Artem Shturkin
Artem Shturkin
Courses Plus Student 8,359 Points

Hello, I suppose , that you should split properties to different selectors. like

@media (min-width: 607px) {
  img {
    float: left;
  }
 img:nth-child(3n+4) {
    clear: left;
  }
}
Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Yup! This is the issue. The challenge wants you to float ALL images to the left and then clear the left side of only the nth-child, so you need to set up two selectors. The code in the original question would ONLY float 3n+4 rather than all images.