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

Joachim Liedtke
Joachim Liedtke
6,690 Points
Posted by Joachim Liedtke
Joachim Liedtke
6,690 Points

I don't understand where the clear is supposed to go

I think I've got the float correct, but it's not clear to me where the clear in Task 2 is supposed to go...

The error message is not very helpful, either (it just says that Task 1 is no longer passing. Whatever that means...).

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

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

Rochell Hill
Rochell Hill
10,677 Points
Rochell Hill
Rochell Hill
10,677 Points

the 1st task asked you to target images with a left float, so no need for the nth-of-type on the first selector...this will complete task 1.

img { float: left; }

task 2 says to clear the float on the 4th image and every third image after, not the 'last child'. You will need to put the right code in the parenthesis after the selector to target the 4th image and every 3rd image after. You may want to review the video on nth child selectors:

img:nth-child() { clear: left; }

Good luck

Joachim Liedtke
Joachim Liedtke
6,690 Points
Joachim Liedtke
Joachim Liedtke
6,690 Points

Ahh, thanks. I guess I didn't understand the question correctly, then...