How to hide first 3 childs of UL using CSS

css, html

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

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?

Original source