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

    css - can't get dropdown nav to show above content below it

    How to make images to go out of the div when width is over the max-width?

    CSS: How to clear a floating object only one level, not the all the way to the left?

    How to change CSS style without id or class

    How to prevent Ajax long-poll from reloading div in Chrome?

    How to correctly set background image in a HTML page using a JavaScript function

    How to remove this extra part at the right?

    How to set display none on tag using css?

    How to horizontally center-align the content of a div by manipulating the CSS of the wrapper div only?

    Divs are overlapping, how to fix? CSS

    Android WebView : how do I control webView height?

    How to make slanted CSS arrow pointing to a div

    How to keep sub div from considering height of its cousin?

    How can I center using percentages?

    How to apply css to only one level of list items (not to child elements)

    HTML/CSS - How do I fix width:100% cutting off when the content creates a horizontal scroll bar?

    How to cancel out .table width:100% in bootstrap css

    How to change font color inside nav element?

    How to change default theme color teal to blue without using custom CSS in materilaize

    css: How to change row color of a table after its been selected and clicked away

    How can I create CSS styles dynamically?

    How do I alter my Jquery slideshow to change size in different screen resolutions

    How to bring in the right margin of a paragraph with border

    Using CSS to create custom borders with just the corners showing

    How to set background-color on 50% of area CSS

    How to get item to appear on mobile homepage only(wordpress)

    How to ignore css class

    Pagination: How to display a long text as book pages?

    How to assign CSS properties to aside tag

    CSS HTML how to ignore some css for non ie7 or ie8