Reputation: 1679
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:
Upvotes: 3
Views: 1659
Reputation: 1679
Sounds like this is a shortcoming in CSS for the moment. Using javascript instead:
$(".latest-item").slice(3).hide();
Upvotes: 0
Reputation: 28753
I think you need to use nth-last-child
and last-child
instead: http://jsfiddle.net/nMbm5/1/
Upvotes: 2