How to hide first 3 childs of UL using CSS


Tags: html,css

Problem :

I have the following structure:

<ul id="test">
    <li class="myclass">Item1</li>
    <li class="myclass">Item2</li>
    <li class="myclass">Item3</li>
    <li class="myclass">Item4</li>
    <li class="myclass">Item5</li>
</ul>

I want to hide the first three items. I wrote the following code but it only hides the first child and not the next two.

#test li:first-child
{
    display:none;
}

How do I hide the other two also?



Solution :

You can use the nth-child selector:

#test li:nth-child(-n+3) {
    display: none;
}

From the linked MDN doc:

Matches if the element is one of the first three children of its parent


    CSS Howto..

    How can I make a fluid width header with text-overflow ellipsis without wrapping?

    How to get hyperlinks inside a “pop-up” term reference on mouse-over, and seperate the HTML term from the “pop-up” reference content

    How to make a div hide properly on hover while trying to make a gif also start on hover

    How to create smaller CSS files for easier handling while developing [closed]

    How do I insert a “close” link in this list

    How to create a 100% fixed footer with a fixed width center transparent gap?

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    How to get body content to center on page using CSS

    How to indent text in a select drop down option menu using PHP & CSS? [REDUX]

    How to alter css style from parent page inside an iframe using jquery

    Why does first slideshow image click skip transition and go straight to image?

    How to stop text in div pushing other divs down the page?

    How to create an enumerated tabular environment in HTML/CSS?

    How to keep a link underlined after it is clicked and then hovered over

    What shape is this, and how can i achieve it using css?

    how to build a mobile site - basics, is it all CSS?

    How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

    Why are div's not staying in row and how to get them to?

    How to strach div in some line to “all left space” with css

    How to apply CSS background color to some text in a paragraph without spaces caused by line-height?

    How to hide hr inside the last li using css

    using css modules how do I define more than one style name

    How to prevent an empty img element from shrinkage?

    How to render thin fonts more smoothly in CSS 3 on Windows?

    How to align

    and tags side-by-side?

    How to fix clickable background with Wordpress theme and CSS

    How could I add two separate text styles to a button in a form in CSS?

    How to float inline elements with css

    ABBR tooltip CSS styling: How to suppress original tooltip, add rounded corners? [duplicate]

    Position: fixed Background DIV with images makes scrolling slow: How to make conditional CSS rules for browser-compatibility?