Refer to the HTML below:< div id= " main " >< ul >< li >...

We want to select the first < li > under #main and change its content.

document.querySelector(selector) returns the first element matching the CSS selector.

In the DOM, the < li > elements under < ul > are children in order:

1st child: " Leo "

2nd child: " Tony "

3rd child: " Tiger "

li:nth-child(1) is the CSS pseudo-class that selects the first < li > inside its parent.

So:

document.querySelector( ' #main li:nth-child(1) ' ).innerHTML = ' The Lion ' ;

selects the first < li > ( " Leo " ) inside #main and sets its innerHTML to " The Lion " .

Why others are incorrect:

A. #main #Leo

There is no element with id " Leo " . id is not set on the < li > , so the selector matches nothing.

B. li:second-child

There is no :second-child pseudo-class. The valid pseudo-class is :nth-child(2); and that would select " Tony " , not " Leo " .

C. ' #main li,Leo '

This selector means “all #main li and all elements named < Leo > ”.

There is no < Leo > tag, and querySelectorAll returns a NodeList, which does not have a single innerHTML property.

Therefore, D is the correct statement.

Study Guide Concepts:

document.querySelector vs querySelectorAll

CSS selectors: nth-child()

DOM element innerHTML property