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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Tyson Gerber
Tyson Gerber
3,286 Points
Posted by Tyson Gerber
Tyson Gerber
3,286 Points

What is the difference between #gallery li:nth-child(4n) and #gallery li:nth-child(3n+1)?

My 4th picture when I had in my code just like the video #gallery li:nth-child(4n) did not change. However when I did change it to #gallery li:nth-child(3n+1) (which I saw in someone else's code in the questions section.) it worked. Can anyone explain the difference? or explain in more depth this whole concept? Thanks!

2 Answers

Hazem mosaad
Hazem mosaad
15,384 Points
Hazem mosaad
Hazem mosaad
15,384 Points

Hi Tyson All About Math in equation (4n) The result will be even all the time

but in 3n+1 it could be odd or even for example if n = 4

the first will be = 16

the second will be = 13

So it depend on your elements you want to select it !

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Tyson Gerber

Hope this is still timely and helpful :)

But I suspect taking a look at the Teacher's Notes that Nick placed under this video will clarify your doubts thoroughly.

But just in case it doesn't (to you or someone else reading this later), you can go to your index.html file in WorkSpaces and try this: copy all your code since the first <li> until the last one (of course, those within the #gallery) and at the end of the list, add a couple of line breaks (just so you know since what point you made this change), and then paste it right there. (Of course, it doesn't make a lot of sense, since you'll duplicate the images, but it will help us see a larger list, i.e.: one with more <li> than just five).

So, in brief, you have originally this list:

        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>

But now, if you paste it there, you'll have:

        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>


          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>

Now, save that code and refresh the browser (and resize the window as needed). Can you see what happens to the third row? Now, comment the lines of code that you just pasted, and save and refresh again. What changed now? While watching that, read the lines that follow:

Now, think about what Nick explained in the Teacher Notes: the 4n is always going to look for your 4th element in the row, right? But once that 4th element is cleared from the left, it will become (by itself) in the first element of the next row, so if you check now how it looks the next element cleared by that 4n is the 8th element (the second on the third row) rather than the 7th (which happens to actually be the first element in the third row, boom!). What Nick explained there is that the way to achieve this is instead of selecting a "fixed 'n'" (hope the wording is correct and clear), taking into account you've got 3 columns (i.e.: rows of 3 images), you say '3n + 1' or, in other words, apply this always to the image coming after the third image in any given row. Voila! You don't struggle anymore, especially if you want to add more (or update your) images in the future.

Hope that helped clarify this a little to you or anyone else with this doubt.

Let me know if it worked for you! :)