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 - Pt. 2

Posted by Braxton Strickland
Braxton Strickland
2,624 Points

Idk what its asking me to do that I havent already tried

Yes, i have gone back and watched the damn videos.

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

@media (min-width: 607px) {
  img {
    float: left;
  }
 img:nth-of-type-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>
   <h1>My Gallery</h1>
    <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>
Thomas Buchstab
Thomas Buchstab
14,766 Points
Thomas Buchstab
Thomas Buchstab
14,766 Points

your pseudo-class is wrong. reset your code and change only nth-child to nth-of-type. hope that helps

2 Answers

Steve Hunter
Steve Hunter
57,712 Points
Steve Hunter
Steve Hunter
57,712 Points

Hi Braxton,

You're pretty much there - you've just got the wrong pseudo-class name:

@media (min-width: 607px) {
  img {
    float: left;
  }
  img:nth-of-type(3n+4) {
   clear: left;
  }
}

That will select the 3n+4 elements of the img type.

I hope that helps,

Steve.

Tobias Helmrich
Tobias Helmrich
31,603 Points
Tobias Helmrich
Tobias Helmrich
31,603 Points

Hey Braxton,

you were close but the pseudo class is called "nth-of-type" and not "nth-of-type-child". You also didn't give it a value in the parenthesis. If you fix those two problems it should work:

/* Write the CSS in the media query below */
@media (min-width: 607px) {
  img {
    float: left;
  }
  img:nth-of-type(3n+4) {
   clear: left;
  }
}