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 Dawn Triplett
Dawn Triplett
17,000 Points

CSS Selectors challenge

I am stuck. Here is the question: "It looks like an <h1> made its way inside the parent body. Now our :nth-child selector no longer targets the desired combination of img child elements. Replace :nth-child with the pseudo-class that only targets a specific type of child element."

I'm confused...are they looking for something along the lines of h1 > img { }

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

Ingvi Jonasson
Ingvi Jonasson
12,173 Points

HI Dawn, The question is a little bit misleading I find as well.

You have to change the pseudo selector from 

img:nth-child(3n+4)

to: 

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

You can read more about it here. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

michaelkyllo
michaelkyllo
11,330 Points

Can anyone explain what the difference is considering no other child interrupted the sequence of images?

Matthew Morales
Matthew Morales
36,545 Points
Matthew Morales
Matthew Morales
36,545 Points

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