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


Tags: css,css3,pseudo-class,css-selectors

Problem :

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/

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 ?

Thanks.



Solution :

  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

  2. What you're doing is fine.


    CSS Howto..

    How can I achieve this transparency effect using css?

    How to reveal content behind a div with pure css?

    How to Create CSS Selector Element including index

    How to remove a CSS class from a Wicket component?

    How can I programmatically (in JavaScript) add “sub-divs” to divs?

    How to let 3 div columns extend the height until hit the bottom of the page?

    How to use css for the hover effect in another div?

    how to put marquee div at the back of another none marquee div?

    How to start css animation on speciefic height of webpage

    How to make background fill or flush to the footer at the bottom of the window

    How to preload css :hover background images

    How to make a dynamic-height DIV [duplicate]

    Add background to first letter of a row of text. How?

    How can I change styling and test for every page reload [closed]

    How to make 1 css value dependent on another?

    How to set Safari print margins via CSS to print borderless

    How can i position a background image to the top left and bottom right of a html element?

    How to use Bootstrap style of BreadCrumb with my ASP.NET menu?

    How can I get my menu/logo to be centered instead of all the way to the right?

    How to move the jQueryUI close button on the dialog over the top of top right corner?

    How can I use webpack to copy files to the distribution folder?

    How to change Label color in flex Using CSS?

    CSS: How to add borders of different colors to input radio buttons labels?

    How do I achieve this animation using javascript/jquery? [closed]

    How to make div size bigger?

    How to create new top headers for weebly

    How to position an element at the TOP LEFT corner of a page using CSS?

    How to increase width of image when dimensions are not known in CSS?

    AngularJS - how to refactoring a CSS code style

    How long can a CSS selector be?