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

JavaScript

Posted by Adam White
Adam White
10,571 Points

Trouble using nth-child in Bootstrap + AJAX

I don't know if my problem is related to Bootstrap because I'm not using rows or columns for my gallery, which is the bulk of my page. The site is responsive: 3 images per line at large, 2 per line at medium, and 1 per line at small.

[image] [image] [image] [image] [image] [image] [image] [image] [image] etc.

When large, I want to style the 1st image's margin one way and the 3rd image's margin a different way.

I've tried:

img li:nth-of-type(3) { background: #ff0000; margin-right: 10px; } }

Also tried

gallery ul:nth-of-type(3n+1) {

background: #ff0000;
margin-right: 10px;
}

gallery ul:nth-child(odd)...

Here's the jQuery I'm using:

''' <script> $(document).ready(function () { var jsonURL = "items.json"; $.getJSON(jsonURL, function (json) { var imgList= ""; $.each(json.items, function () { imgList += '<a href=' + this.url + '<li><img src= ' + this.thumbnail + '></li>' + '</a>'; }); $('#gallery').append(imgList); $('#gallery img').addClass('gal_image'); }); }); </script> '''

Just learning. I hope this isn't confusing. Thank you.

1 Answer

Ognjen Jevremovic
Ognjen Jevremovic
13,028 Points
Ognjen Jevremovic
Ognjen Jevremovic
13,028 Points

Hello Adam, how are you?

It would be much easier if you could perhaps post more snippets of your code, or even better share the workspace you're working on, as it's really hard to debug it this way.

But, the thing that caught my eye, was the CSS selector you've provided. I guess your markup is somehow similar to this:

    <ul>
        <li>
            <img src="" alt="">
        </li>

        <li>
            <img src="" alt="">
        </li>

        <li>
            <img src="" alt="">
        </li>

           <li>
            <img src="" alt="">
        </li>

        <li>
            <img src="" alt="">
        </li>

        <li>
            <img src="" alt="">
        </li>
    </ul>

If so, the CSS selector targeting every 3rd item (every third list item in the unordered list) should look like this:

    li:nth-of-child(3n) > img {
        /* some CSS declaration here */
    }

I hope that helps and solves the issue. Here's the code snippet that I've written that could perhaps help you out even further: https://jsfiddle.net/jjp4nn0n/

Keep on hacking mate. Best wishes on your learning paths!