How do I get all the <li> elements within a <div> having a specific id?

Question

Seems simple enough and I think I've done it before once or twice. What is the jQuery selector syntax for grabbing all the <li> elements inside a <div> with id "chapters"?

I can get the <li> elements with $('li') and the div with $('#chapters') but I need to limit the selection to <li> within that div.

Here is the markup, followed by the jQuery selector. It doesn't work and now I'm at a loss as to why:

<li>1 - outside the div</li>

<div id="chapters">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</div>

<li>2 - outside the div</li>

JQuery selector:

$('#chapters li').css("background-color","red");

Answer 1

It is simply

$('#chapters li')

Have a look at the selectors documentation.

Answer 2

I think you need to use Period(.) instead of (#) in the selector. Below is the code:

$('.chapters li').css("background-color","red");