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

user_973237 0
Viewed 59618

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 first, and then I am trying to display the first 3 .row by using .row:nth-child(-n+3)

jsfiddle here: http://jsfiddle.net/z8fMr/1/

.row {
  display: none;
}

.row:nth-child(-n+3) {
  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>

I have two problems here:

  1. Row 3 is not displayed; am I using nth-child in the wrong way?
  2. Is there a better practice than hiding everything and then creating a specific rule to display the n first elements that I want? Is there a way in CSS to just display the first 3 .row and then hide all the other .row?
pseudo-class css-selectors css
4 Answers

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

user_10188450
Related