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

by

  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.

Leave a Comment