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 Elliott Mangham
Elliott Mangham
13,086 Points

Replace :nth-child with the pseudo-class that only targets a specific type of child element

Not sure if I've missed something, or maybe I'm just brain-dead Today... but can somebody please give me the answer with a brief explanation please?

Thanks!

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

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

2 Answers

Stephen Bone
Stephen Bone
12,359 Points
Stephen Bone
Stephen Bone
12,359 Points

Hi Elliott

It wants you to use the nth-of-type psuedo class so that it makes sure to target the img elements only otherwise the h1 element is included in the whole nth-child(3n+4) calculation.

Your code should change from:

img:nth-child(3n+4) {

to:

img:nth-of-type(3n+4) {

Hope it helps!

Stephen

Elliott Mangham
Elliott Mangham
13,086 Points
Elliott Mangham
Elliott Mangham
13,086 Points

Thank you!

Stephen Bone
Stephen Bone
12,359 Points
Stephen Bone
Stephen Bone
12,359 Points

No problem, happy it helped! :)