How to show the first N elements of a block and hide the others in css?

Question

I am trying to hide the first 3 elements having the class .row inside the block .container.

What I\'m doing is hiding all the .row

Answer 1

Also, like Giovanni's solution, something like this could also work.

.container > .row:nth-child(3) ~ .row {
    /* this rule targets the rows after the 3rd .row */
    display: none;
}

Answer 2

You don't even need CSS3 selectors:

.row + .row + .row + .row {
    display: none;
}

This should work even in IE7.
Updated fiddle

Answer 3

1. You have a .notarow as the first child, so you have to account for that in your :nth-child() formula. Because of that .notarow, your first .row becomes the second child overall of the parent, so you have to count starting from the second to the fourth:

   .row:nth-child(-n+4){
       display:block;
   }
   

   Updated fiddle

2. What you're doing is fine.

Answer 4

I found this answer by Googling "css show first n elements", but the question now seems to be the opposite (hiding first n elements)

:nth-child(n+4)

^ this will work if you're looking for what I was looking for