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

Posted by Louis Delgado
Louis Delgado
10,182 Points

how do I pick the fourth row first and then every 3rd row after that?

I'm having some trouble with this section

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

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

Hi Louis,

I believe to pick the fourth row first and then every third row after that you need to switch around this part of your CSS:

Instead of:

img:nth-child(4n+3)

Try:

img:nth-child(3n+4)

Here's an example in CodePen

I know it can get really confusing!

Louis Delgado
Louis Delgado
10,182 Points

hl9 thanks for the help!

4 Answers

Louis Delgado
Louis Delgado
10,182 Points
Louis Delgado
Louis Delgado
10,182 Points

its ok hl9 had a great response :) thank you for trying to help

Louis Delgado
Louis Delgado
10,182 Points
Louis Delgado
Louis Delgado
10,182 Points

just different ways of thinking thanks to you both :) major intelligence gained

hl9
hl9
8,443 Points

I was just about to say the same thing!!!

Just found this great article by Chris Coyier called "How nth:child Works"

Happy Easter guys

Mark VonGyer
Mark VonGyer
21,239 Points
Mark VonGyer
Mark VonGyer
21,239 Points

Happy Easter! Thank you for the link! Good read! :)

Mark VonGyer
Mark VonGyer
21,239 Points
Mark VonGyer
Mark VonGyer
21,239 Points

Hi As Hl9 has said, you need to change it -but you need to change it to (3n+1).

What this will do is say the nth unit +1.

So it will pick

(3+1)

(6+1)

(9+1)

which will be;

4

7

10 the reason for this comes from algebra.

Mark VonGyer
Mark VonGyer
21,239 Points
Mark VonGyer
Mark VonGyer
21,239 Points

ignore this, its the wrong as n doesn't initialise at 1 it is correct at (3n+4), where n will initialise at 0.

Louis Delgado
Louis Delgado
10,182 Points
Louis Delgado
Louis Delgado
10,182 Points

Happy Easter to you too!! great stuff!!