How do I select only the 4th and higher LIs in each UL?

Question

For this XHTML:

<ul class="collapse">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>

<ul class="collapse">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

Using jQuery, how do I select only the 4th and higher LIs in each UL?

I've tried:

$("ul.collapse li:gt(2)").css("color", "red");

But it selects the 4th and higher LIs in the whole document. "Four", "Five", and "1", "2", "3", "4" are red.

Answer 1

You can do it like this:

$("ul.collapse").find("li:gt(2)").css("color", "red");

You can play with/test it here. This finds each <ul class="collapse"> then for each one independently evaluates the find selector, giving you the result you're after.

Answer 2

Nth-child will do the trick as well.

$(document).ready(function(){
    $('.collapse li:nth-child(n+4)').css("color", "red");
});