use querySelectorAll() to select second element of the list

Question

Recently I am starting to learn HTML and JS. When I am leaning the document.querySelectorAll() API, I saw it can use

document.querySelectorAll('#example-container li:first-child');

to select the first child of the list which has id name is example-container.

So I thought may be

document.querySelectorAll('#example-container li:second-child');

can select the second child of the list which has id name is example-container.

But obviously it is wrong. So I am confused how can I access the second or third item of the list by using querySelectorAll() ?

I post the HTML code below:

<div id="example-container">
  <ul>
    <li class="feature">Luxurious sized master suite</li>
    <li class="feature">Oversized walk-in closet</li>
    <li class="feature">Frameless Beech cabinetry with concealed hinges</li>
    <li class="feature">Elegant slab white quartz countertops with large backsplash</li>
    <li class="feature">Dual china sinks with Moen faucets</li>
    <li class="feature">Clear frameless shower enclosures</li>
</ul>

Answer 1

document.querySelectorAll('#example-container li') return a collection with all li nodes in example-container .

Its like array, so you can iterate it.

document.querySelectorAll('#example-container li')[index]

 console.log(document.querySelectorAll('#example-container li')[1]) //its second

 <div id="example-container"> <img src="img/coded-homes-logo-sm.png" class="img-responsive" /> <img src="img/home.jpg" class="thumbnail img-responsive push-down-top" /> <section class="description"> <p class="h5">Five bedrooms, three full baths and 3,702 square feet of living space.</p> <p>Extra-tall double-door entry opens to an inviting and spacious foyer. Formal living and dining rooms featuring see through fireplace.</p> <p>Large gourmet kitchen with granite countertops, stainless steel appliances with double ovens. Arrow shaped center island, huge, walk in pantry and lots of cabinets for storage. Large eating area off the kitchen for the family to enjoy meals together.</p> <p>The front bedroom with full bathroom just outside the door. Huge family room with recessed entertainment area complete with recessed lighting and ceiling fan. The huge master suite features a soaker tub, large shower, walk-in closet and an additional over-sized walk-in closet. The master bath features split sinks with granite countertops. 3 large, secondary bedrooms and large bathroom that is great for kids to share.</p> <p>Also includes: 3 car garage, high ceilings throughout, wired for spa in backyard, dual pane windows, new tile and carpet on bottom floor and large, upstairs laundry room. Nicely landscaped backyard with the best views in the Temescal Valley.</p> </section> <h2 class="h4">Features</h2> <ul> <li class="feature">First</li> <li class="feature">Second</li> <li class="feature">Frameless Beech cabinetry with concealed hinges</li> <li class="feature">Elegant slab white quartz countertops with large backsplash</li> <li class="feature">Dual china sinks with Moen faucets</li> <li class="feature">Clear frameless shower enclosures</li> </ul>

Answer 2

Since you are asking what you can do to select the second or third element using query selectors, like document.querySelectorAll('#example-container li:second-child') , I am going to tell you how to select them with both css selectors and document.querySelectorAll() .

You could use:

const el = document.querySelectorAll('#example-container li')[1];

to select the second element in the list. And this is probably the preferred way to do it in JavaScript.

But css has something called :nth-child() which allows you to choose a specific child in the list. In JS you could do something like:

const el = document.querySelector('#example-container li:nth-child(2)');

to select the second list item. Notice that you do not need the querySelectorAll() method.

I hope that helps a bit.