CODEWITHSUNDEEP
css
Yahreen
Yahreen

Reputation: 1679

nth-child in nested divs

I am attempting to hide the last 3 divs with the class name .latest-item using nth-child:

<div class="latest-group">

            <div class="latest-1 latest-item latest-sort-1">
              <h3>Title</h3>
              <p>Paragraph</p>
            </div><!--end latest-1-->

            <div class="latest-2 latest-item latest-sort-2">
              <h3>Title</h3>
              <p>Paragraph</p>
            </div><!--end latest-2-->

            <div class="latest-3 latest-item latest-sort-3">
              <h3>Title</h3>
              <p>Paragraph</p>
            </div><!--end latest-3-->

          </div><!--end latest-group-->

          <div class="latest-group">

            <div class="latest-4 latest-item latest-sort-1">
              <h3>Title</h3>
              <p>Paragraph</p>
            </div><!--end latest-4-->

            <div class="latest-5 latest-item latest-sort-2">
              <h3>Title</h3>
              <p>Paragraph</p>
            </div><!--end latest-5-->

            <div class="latest-6 latest-item latest-sort-3">
              <h3>Title</h3>
              <p>Paragraph</p>
            </div><!--end latest-6-->

          </div><!--end latest-group-->​

and the CSS:

.latest-item:nth-child(n+3) { 
           display:none;
       }​

I can not correctly target the divs with the class name .latest-item . In jQuery I could do something like:

$(".latest-item").slice(3).hide();

Here's a Fiddle:

http://jsfiddle.net/nMbm5/

Upvotes: 3

Views: 1659

Answers (2)

Yahreen
Yahreen

Reputation: 1679

Sounds like this is a shortcoming in CSS for the moment. Using javascript instead:

$(".latest-item").slice(3).hide();

Upvotes: 0

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

I think you need to use nth-last-child and last-child instead: http://jsfiddle.net/nMbm5/1/

Upvotes: 2

Related Questions