60

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?
0

4 Answers 4

86
  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.

6
  • Thanks for your very clear explanation BoltClock. I thought (-n+3) would select the first 3 .row whatever element there is before.
    – Vincent
    Commented Aug 12, 2012 at 12:38
  • Do you also know if there is also a best practice for what I want to do? Hiding everything and then showing the first 3 elements => is there a better way to show the first N elements only in css? thanks
    – Vincent
    Commented Aug 12, 2012 at 12:40
  • There doesn't seem to be a better way. Using :nth-child() like this is fine as long as you accommodate for the actual structure and it is predictable enough.
    – BoltClock
    Commented Aug 12, 2012 at 12:42
  • 1
    What does the minus (-) do here?
    – tmyie
    Commented May 28, 2015 at 9:51
  • 6
    @tmyie: It flips the n so that it counts backwards starting from 0, so you get 0+4, -1+4, -2+4, -3+4... resulting in the 4th, 3rd, 2nd and 1st children.
    – BoltClock
    Commented May 28, 2015 at 9:52
23

You don't even need CSS3 selectors:

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

This should work even in IE7.
Updated fiddle

0
10

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.