CODEWITHSUNDEEP
csscss-selectors
Nick Bewley
Nick Bewley

Reputation: 9289

nth child css selecting

I am trying to figure out how to use nth to select the one out of every 3 elements in a group of objects.

If my markup is structured like this: 

<div class="all-items">
  <div class="block">
    <a href="the-link">
      <div class="image-list">
        <div class="drop-shadow curved curved-hz-1">
          <img src="an-image.png" />
        </div>
      </div>
    </a>
  </div>

  <!-- then this repeats to show all the images -->
  <div class="block">
    <a href="the-link">
      <div class="image-list">
        <div class="drop-shadow curved curved-hz-1">
          <img src="an-image.png" />
        </div>
      </div>
    </a>
  </div>

  <!-- ... etc. -->

</div> <!-- end div class "all-items" -->

How can I select every 3rd img in the group of images inside <div class="all-items">?

Upvotes: 1

Views: 120

Answers (2)

CaribouCode
CaribouCode

Reputation: 14398

div.block:nth-child(3n) img { /*your css here*/ }

You're selecting the 3 block of divs, then the image inside that.

Upvotes: 3

No Results Found
No Results Found

Reputation: 102755

This will select every third .block's image:

.block:nth-child(3n) img {
    /* styles */
}

Demo: http://jsfiddle.net/sC8Ne/

Upvotes: 1

Related Questions