CODEWITHSUNDEEP
htmlcss
SteveMills04
SteveMills04

Reputation: 119

css nth-child selector not working

I am trying to skip every third element, 1,2,4,5,7,8 etc... should have a margin-right of 9px and every 3rd should have a margin-right of 0 so I am using the code below with no luck!

css

.thumbImg:nth-child(3n + 1), .thumbImg:nth-child(3n + 2)  {margin-right:9px;}

HTML

 <a href="images/image_gallery/gallery1.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery1.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery2.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery2.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery3.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery3.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery4.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery4.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery5.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery5.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery6.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery6.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery7.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery7.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery8.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery8.jpg" class="thumbImg"></a>

JSFIDDLE

https://jsfiddle.net/fnc69q9m/

Upvotes: 0

Views: 43

Answers (1)

Stickers
Stickers

Reputation: 78676

You did it on the wrong element. It should be the <a> not the <img> inside it.

Updated demo

a:nth-child(3n+1),
a:nth-child(3n+2) {
    margin-right:9px;
    border-bottom:10px red solid;
}

or

a:nth-child(3n+1) img,
a:nth-child(3n+2) img {
    margin-right:9px;
    border-bottom:10px red solid;
}

Upvotes: 3

Related Questions