How to get all <li> elements in a <div> with a specific identifier?

Question

It seems pretty simple, and I think I did it before once or twice. What is the jQuery selector syntax for capturing all <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 <li> selection inside this div.

Here is the markup followed by the jQuery selector. This does not work, and now I do not understand 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's simple

 $('#chapters li') 

See the documentation selector .

Answer 2

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

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