Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Liam Hayes
seal-mask
.a{fill-rule:evenodd;}techdegree
Liam Hayes
Full Stack JavaScript Techdegree Student 13,116 Points
Posted by Liam Hayes
.a{fill-rule:evenodd;}techdegree
Liam Hayes
Full Stack JavaScript Techdegree Student 13,116 Points

Can't Understand "Multiple Selectors" challenge

How's it going guys? :)

SORRY FOR LONG POST. BASICALLY WHAT I WANT TO KNOW IS WHY THE ANSWER IS:

let listItems = document.querySelectorAll("#rainbow li");

AND WHY THE ANSWER IS NOT:

let listItems = document.querySelectorAll("#rainbow");

  • I BELIEVE THIS CONCEPT IS CALLED using the querySelectorAll() Method with descendant selectors

  • I don't know how descendants work so I don't really know what's going on. I assume this is probably covered in another section.

If you're interested in reading further, below is a longer explanation of the problem.

Longer Explanation:

In the "Selecting Multiple Elements" challenge, I know what the right answer is but I can't understand why the answer is correct.

  • Here are the instructions:

We have some JavaScript code that will cycle over list items and apply colors from an array called colors. The code will apply the first color to the first list item, the second color to the second list item and so on. But the code is not complete. On line 1 of app.js, set the variable listItems to refer to a collection. The collection should contain all list items in the unordered list element with the id of rainbow.

  • Here are the two given files, index.html and js/app.js:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Rainbow!</title>
  </head>
  <body>
    <ul id="rainbow">
      <li>This should be red</li>
      <li>This should be orange</li>
      <li>This should be yellow</li>
      <li>This should be green</li>
      <li>This should be blue</li>
      <li>This should be indigo</li>
      <li>This should be violet</li>
    </ul>
    <script src="js/app.js"></script>
  </body>
</html>

js/app.js

let listItems;
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}

I assume that the answer is: 

let listItems = document.querySelectorAll("#rainbow");

But it looks like the answer is:

let listItems = document.querySelectorAll("#rainbow li");

If anybody knows, could someone explain what this does? Like how does it work to put in two words in the parenthesis like that?

Thank you very much!! :)

furkan
furkan
11,733 Points

You are very welcome. I am glad I have been able to help :)

1 Answer

furkan
furkan
11,733 Points

The querySelectorAll() has selected a parent element with an ID of "rainbow" and then selected all the child li elements. So, the parent element is a ul with that ID. In that case, it will make sense to use the following code to select the children:

let listItems = document.querySelectorAll("#rainbow li");

/* You are selecting the parent ul element and then all the child li elements. If we did it the way you did it at first, then we are only selecting the parent ul element and not the children, so it will not affect the properties of the children. */

I hope that has helped clear the confusion.