CSS CSS Selectors Advanced Selectors :nth Pseudo-Class Challenge

I do not understand how to get past this nth child code challenge.

Question: We want three floated images per row. In the media query, create a pseudo-class selector that targets the fourth img child element first, then every third img that follows. Then, add a clear property that clears the left float.

What am I missing? Thanks.

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>

4 Answers

Graeme Oxley
Graeme Oxley
8,918 Points

Hey Brittney. I went back and did the exercise myself to understand exactly what you were wanting to do and here is what did pass for me.

@media (min-width: 607px) {
  img {
    float:left;
  }

  img:nth-child(3n+4) {
    clear:left;
  }
}

The important thing to notice here, and this is important in all CSS, is the understanding of what should and shouldn't be grouped. In this example we are saying to ourselves "I want all of the images to float to the left, but I only want the 4th image and then every 3rd image after that to clear it's left float."

Your code says "I only want the 4th image and then every 3rd image after that to float to the left and also to clear it's left float." leaving the rest of the images with no float and no clear.

Something weird that I discovered about this challenge also is that the "preview" appears (on my screen at least) to be capped at 606px width; however the code itself only comes into effect at 607px, so it will never actually preview the code change. Changing "min-width" to "max-width" will fix that and show you the three images side-by-side.

Hi Brittney,

This is a puzzling challenge. I did it a few months back and I think I had problems with it then; I tried it again today and it passed even though I grouped 'clear:left' wrong after float left!

Graeme must be a pro because when I changed the min to max and replicated Graeme's code it all worked--border and alignment--3 in a row--so that I could view and understand the result the way it should be.

Like Graeme indicated, it could be the size of the screen (I am working on a 24" screen)~. Happy coding!

Thank you! Graeme's code worked for me. And it makes sense now but was hard to figure out when initially reading the question.

That is great and I was also glad to see Graeme's code; it helped clarify this challenge for me too.

Best regards