hide the rest of the list in css or jquery

Question

Is is possible to hide the rest of the list example? I have 10 items in the list and I want to hide all of the list items after 4 list:

<ul>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>hide this list</li>
  <li>hide this list</li>
  <li>hide this list</li>
  <li>hide this list</li>
  <li>hide this list</li>
  <li>hide this list</li>
</ul>

Answer 1

You can do with :nth-child...

li:nth-child(n+5) {
  display: none;
}

More here: http://nthmaster.com/

Answer 2

If you are able to modify the HTML code, you can add classes to the list items you wish to hide.

Otherwise, you can use this piece of CSS code:

li:nth-child(n+5) {
    display: none;
}

This is a very generic selector though, so you may wish to scope it using classes or other more specific selectors.

Read more about :nth-child and :nth-of-type.

Answer 3

You tagged it with jQuery so... How about :gt()?

$('li:gt(3)').hide();

Demo: http://jsfiddle.net/TEfz9/