Nth-child not working

HTML-CSS
1

Hello,
I’m pretty new to all this so I’m sorry if I don’t make a lot of sense.
So basically I have
Div class=“gallery”

Then a bunch of images that I’ve displayed with grid and now I wanted to use the nth-child to put a border around some of them.

I tried
. gallery:nth-child(odd) img {
border: 8px solid black;
}

And it’s not working. I tried some different things as well like taking the “img” bit from the above, tried using “div” instead of “.gallery” and I don’t know what else! Really panicking now as this is my final project for the css portion and really need this to work.

Any help would be much appreciated! Thanks

2

hello and welcome to fcc forum :slight_smile:

  • do you have more than one “gallery” div?

if you need to have a look at how “nth-child” works, consider looking into this “mdn article” about this, happy reading :slight_smile: :nth-child() - CSS: Cascading Style Sheets | MDN

3

Hi! Thank you for the link! I’ve read it all and still not being able to see what I’m doing wrong. I’ve only got on “gallery” div and everything else is working fine when I use “.gallery” and even “.gallery img”, the only thing I’m not being able to get to work is the nth-child.

4

You use :nth-child() on the child elements not the parent, as the name suggests.

I don’t see your code but I think that you only have one .gallery element and inside goes all images.

This will select odd .gallery elements inside a parent which is not your case.

You need to select odd img in your .gallery element.
So you should use :nth-child() on your img not .gallery.

Hope that helps.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.