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

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;
}

You don't even need CSS3 selectors:

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

This should work even in IE7.
Updated fiddle


  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

    .row {
        display: none;
    }
    
    .row:nth-child(-n+4) {
        display: block;
    }
    <div class="content">
        <div class="notarow">I'm not a row and I must remain visible</div>
        <div class="row">Row 1</div>
        <div class="row">Row 2</div>
        <div class="row">Row 3</div>
        <div class="row">Row 4</div>
        <div class="row">Row 5</div>
        <div class="row">Row 6</div>
    </div>
  2. What you're doing is fine.