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.

More Related Contents:

  1. css3 nth of type restricted to class [duplicate]
  2. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  3. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  4. What is the difference between a pseudo-class and a pseudo-element in CSS?
  5. Does CSS have a :blur selector (pseudo-class)?
  6. What is the difference between :focus and :active?
  7. How to select the first, second, or third element with a given class name?
  8. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  9. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  10. What’s the difference between CSS3’s :root pseudo class and html?
  11. Why doesn’t this CSS :not() declaration filter down?
  12. CSS 3 nth of type restricted to class [duplicate]
  13. Is there an opposite CSS pseudo-class to :hover?
  14. Is there a CSS parent selector?
  15. Complex CSS selector for parent of active child [duplicate]
  16. CSS3 selector :first-of-type with class name?
  17. Pure CSS checkbox image replacement
  18. Handling a colon in an element ID in a CSS selector [duplicate]
  19. CSS selector for attribute names based on a wildcard
  20. IE8 :nth-child and :before
  21. Can I use variables for selectors?
  22. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  23. CSS Selector for
  24. How can I apply styles to multiple classes at once?
  25. Is it possible to select the last n items with nth-child?
  26. CSS property value from class name
  27. LESS CSS: abusing the & Operator when nesting?
  28. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  29. How to skip first child?
  30. Latest on CSS parent selector [duplicate]

Leave a Comment