Question

I have a list (menu) with a dynamic number of items:

<ul id="menu">
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
</ul>

I’m using a media query to style the menu differently when the browser is < 1000px wide:

@media screen AND (max-width: 999px) {
    ul#menu li:nth-child(4+) {
          visibility: hidden;
    }
}

Obviously, this doesn’t work but it illustrates what I want to achieve: hide any list element after the fourth.

I realize there are ways to do this with different classes on the list items, but I want to achieve it with pure CSS.

Answer 1

You can use :nth-child(n + 4) to target them:

ul#menu li:nth-child(n + 4) {
    visibility: hidden;  // display: none?
}​

You can also use :nth-child(-n + 3) to target only the first four elements.

Demo: http://jsfiddle.net/yhsE9/3/